jqBootstrapValidation https://reactiveraven.github.io/jqBootstrapValidation/
A JQuery validation plugin for bootstrap forms.
CREATE TABLE users (
id serial PRIMARY KEY,
fullname VARCHAR ( 100 ) NOT NULL,
username VARCHAR ( 50 ) NOT NULL,
password VARCHAR ( 255 ) NOT NULL,
email VARCHAR ( 50 ) NOT NULL
);
install psycopg2 https://pypi.org/project/psycopg2/
Psycopg is the most popular PostgreSQL database adapter for the Python programming language.
(venv) PS C:\flaskmyproject> pip install psycopg2
#app.py
from flask import Flask, render_template, request, jsonify
from werkzeug.security import generate_password_hash, check_password_hash
import psycopg2 #pip install psycopg2
import psycopg2.extras
app = Flask(__name__)
app.secret_key = "caircocoders-ednalan"
DB_HOST = "localhost"
DB_NAME = "sampledb"
DB_USER = "postgres"
DB_PASS = "admin"
conn = psycopg2.connect(dbname=DB_NAME, user=DB_USER, password=DB_PASS, host=DB_HOST)
@app.route('/')
def index():
return render_template('index.html')
@app.route("/insert",methods=["POST","GET"])
def insert():
cur = conn.cursor(cursor_factory=psycopg2.extras.DictCursor)
if request.method == 'POST':
fullname = request.form['fullname']
username = request.form['username']
email = request.form['email']
password_hash = request.form['password']
password = generate_password_hash(password_hash)
cur.execute("INSERT INTO users (fullname, username, email, password) VALUES (%s,%s,%s,%s)",[fullname,username,email,password])
conn.commit()
cur.close()
return jsonify('New Records added successfully')
if __name__ == "__main__":
app.run(debug=True)
templates/index.html
//templates/index.html
<!DOCTYPE html>
<html>
<head>
<title>Sign Up Form Validation using jqBootstrapValidation using Python Flask Jquery Ajax and PostgreSQL</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqBootstrapValidation/1.3.6/jqBootstrapValidation.js"></script>
<style>
.controls p{
color:#a94442;
}
</style>
</head>
<body>
<div class="container">
<h3 align="center">Sign Up Form Validation using jqBootstrapValidation using Python Flask Jquery Ajax and PostgreSQL</h3>
<br />
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-6">
<form class="form-horizontal" method="POST" id="simple_form" novalidate="novalidate">
<fieldset>
<div id="legend">
<legend class="">Register</legend>
</div>
<div class="control-group">
<label class="control-label" for="fullname">Name</label>
<div class="controls">
<input type="text" id="fullname" name="fullname" class="form-control form-control-lg" placeholder="Name" required="required" data-validation-required-message="Please enter your Name">
<p class="text-danger help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="username">Username</label>
<div class="controls">
<input type="text" id="username" name="username" class="form-control form-control-lg" placeholder="Name" required="required" data-validation-required-message="Please enter your Username">
<p class="text-danger help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">E-mail</label>
<div class="controls">
<input type="email" id="email" name="email" class="form-control form-control-lg" placeholder="Email" required="required" data-validation-required-message="Please provide your E-mail">
<p class="text-danger help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="password">Password</label>
<div class="controls">
<input type="password" id="password" name="password" class="form-control form-control-lg" placeholder="Password" required="required" data-validation-required-message="Please provide your password">
<p class="text-danger help-block"></p>
</div>
</div>
<div class="control-group">
<label class="control-label" for="password_confirm">Password (Confirm)</label>
<div class="controls">
<input type="password" id="password_confirm" class="form-control form-control-lg" name="password_confirm" placeholder="Password (Confirm)" required="required" data-validation-required-message="Please confirm password">
<p class="text-danger help-block"></p>
</div>
</div>
<div class="control-group">
<div id="success"></div>
<div class="controls">
<button class="btn btn-success" type="submit" class="form-control form-control-lg" class="btn btn-primary" id="send_button">Register</button>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-md-2"></div>
</div>
</div>
<script>
$(document).ready(function(){
$('#simple_form input').jqBootstrapValidation({
preventSubmit: true,
submitSuccess: function($form, event){
event.preventDefault();
$this = $('#send_button');
$this.prop('disabled', true);
var form_data = $("#simple_form").serialize();
$.ajax({
url:"/insert",
method:"POST",
data:form_data,
success:function(){
$('#success').html("<div class='alert alert-success'><strong>Successfully Register. </strong></div>");
$('#simple_form').trigger('reset');
},
error:function(){
$('#success').html("<div class='alert alert-danger'>There is some error</div>");
$('#simple_form').trigger('reset');
},
complete:function(){
setTimeout(function(){
$this.prop("disabled", false);
$('#success').html('');
}, 5000);
}
});
},
});
});
</script>
</body>
</html>
