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
<!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
//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
//dbcon.php
<?php
$conn = new mysqli('localhost','root','','testingdb');
if ($conn->connect_error) {
die('Error : ('. $conn->connect_errno .') '. $conn->connect_error);
}
?>
