article

Tuesday, February 23, 2021

Python Flask Registration Form Validation using jqBootstrapValidation with Jquery Ajax and Mysql

Python Flask Registration Form Validation using jqBootstrapValidation with Jquery Ajax and Mysql


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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
//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>

Posted by ednalan at 6:16 PM . Under .

Related Post