article

Wednesday, February 24, 2021

PHP Mysql Registration Form Validation using jqBootstrapValidation with Jquery Ajax

PHP Mysql Registration Form Validation using jqBootstrapValidation with Jquery Ajax

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;
index.php
?
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
//index.php
<!DOCTYPE html>
<html>
<head>
<title>PHP Mysql Registration Form Validation using jqBootstrapValidation with Jquery Ajax</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">PHP Mysql Registration Form Validation using jqBootstrapValidation with Jquery Ajax</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, #simple_form textarea').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.php",
               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>
insert.php
?
1
2
3
4
5
6
7
8
9
10
//insert.php
<?php
include('dbcon.php');
$username = $_POST["username"];
$email = $_POST["email"];
$password = $_POST["password"];
$sql = "INSERT INTO tbl_user(username, email, password) VALUES ('$username', '$email', '$password')";
$conn->query($sql);
echo "Record Successfully added";
?>
dbcon.php
?
1
2
3
4
5
6
7
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
    die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>

Posted by ednalan at 1:03 AM . Under , .

Related Post