jqBootstrapValidation https://reactiveraven.github.io/jqBootstrapValidation/
A JQuery validation plugin for bootstrap forms.
--
-- Table structure for table `tbl_user`
--
CREATE TABLE `tbl_user` (
`id` int(11) NOT NULL,
`username` varchar(150) NOT NULL,
`email` varchar(150) NOT NULL,
`password` varchar(150) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
--
-- Dumping data for table `tbl_user`
--
INSERT INTO `tbl_user` (`id`, `username`, `email`, `password`) VALUES
(1, 'cairocoders', 'cairodoers@gmail.com', 'tutorial101');
--
-- Indexes for dumped tables
--
--
-- Indexes for table `tbl_user`
--
ALTER TABLE `tbl_user`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `tbl_user`
--
ALTER TABLE `tbl_user`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
#app.py
from flask import Flask, render_template, request, jsonify
from flask_mysqldb import MySQL,MySQLdb #pip install flask-mysqldb https://github.com/alexferl/flask-mysqldb
app = Flask(__name__)
app.secret_key = "caircocoders-ednalan"
app.config['MYSQL_HOST'] = 'localhost'
app.config['MYSQL_USER'] = 'root'
app.config['MYSQL_PASSWORD'] = ''
app.config['MYSQL_DB'] = 'testingdb'
app.config['MYSQL_CURSORCLASS'] = 'DictCursor'
mysql = MySQL(app)
@app.route('/')
def index():
return render_template('index.html')
@app.route("/insert",methods=["POST","GET"])
def insert():
cur = mysql.connection.cursor(MySQLdb.cursors.DictCursor)
if request.method == 'POST':
username = request.form['username']
email = request.form['email']
password = request.form['password']
cur.execute("INSERT INTO tbl_user (username, email, password) VALUES (%s,%s,%s)",[username,email,password])
mysql.connection.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>Python Flask Registration Form Validation using jqBootstrapValidation with Jquery Ajax and Mysql</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">
<br />
<h3 align="center">Python Flask Registration Form Validation using jqBootstrapValidation with Jquery Ajax and Mysql</h3>
<br />
<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="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>
<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>
