we will see
- How to use Remote rule in jQuery Validation
- Live Email Availability check
- jQuery Ajax JSON Response
- Ajax Signup
Looking for Bootstrap Login, Sign Up Modal Forms, Then Here is the Tutorial
In previous tutorial we already covered creating a responsive bootstrap form with validation so i am going to skip the bootstrap form and explaining the above defined title.
Database Table
the database name i have used here is ajax-submit, so create database and copy/paste following sql code into your phpmyadmin to store user details.
CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(60) NOT NULL,
`email` varchar(60) NOT NULL,
`password` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
config.php
simpel database configuration file created with PDO extension.
<?php
define('DBhost', 'localhost');
define('DBuser', 'root');
define('DBPass', '');
define('DBname', 'ajax-submit');
try{
$DB_con = new PDO("mysql:host=".DBhost.";dbname=".DBname,DBuser,DBPass);
}catch(PDOException $e){
die($e->getMessage());
}
ajax-signup.php
simpel php file contains only php code which inserts and creates new user record and store it into mysql table, it will give JSON response as an output. $response = array(); contains json string as status and message. whatever it returns it will be in JSON format.
<?php
header('Content-type: application/json');
require_once 'config.php';
$response = array();
if ($_POST) {
$name = $_POST['name'];
$email = $_POST['email'];
$pass = $_POST['cpassword'];
$stmt = $DB_con->prepare('INSERT INTO users(name,email,password) VALUES(:name, :email, :pass)');
$stmt->bindParam(':name', $name);
$stmt->bindParam(':email', $email);
$stmt->bindParam(':pass', $pass );
$stmt->execute();
// check for successfull registration
if ($stmt->rowCount() == 1) {
$response['status'] = 'success';
$response['message'] = '<span class="glyphicon glyphicon-ok"></span> registered sucessfully, you may login now';
} else {
$response['status'] = 'error'; // could not register
$response['message'] = '<span class="glyphicon glyphicon-info-sign"></span> could not register, try again later';
}
}
echo json_encode($response);
Remote Rule
Here’s how you can use Remote Rule within jQuery Validation Rules, it will call “check-email.php” file silently and returns true/false.
email : {
required : true,
validemail: true,
remote: {
url: "check-email.php",
type: "post",
data: {
email: function() {
return $( "#email" ).val();
}
}
}
},
Ajax Signup Code
if there is no validation error the submithandler call the submitForm() function, the function contains ajax method which calls the “ajax-signup.php” page as POST request and print JSON response within div tag and shows as slideDown effect.
function submitForm(){
$.ajax({
type : 'POST',
async: false,
url : 'ajax-signup.php',
data : $('#register-form').serialize(),
dataType : 'json',
success : function(data){
console.log(data);
$('button').html('<img src="ajax-loader.gif" /> signing up...').attr('disabled', 'disabled');
setTimeout(function(){
if ( data.status==='success' ) {
$('#errorDiv').slideDown(200, function(){
$('#errorDiv').html('<div class="alert alert-info">'+data.message+'</div>');
$('#errorDiv').delay(3000).slideUp(100);
$("#register-form")[0].reset();
$('#btn-signup').html('<span class="glyphicon glyphicon-log-in"></span> Sign Me Up');
$('#btn-signup').removeAttr('disabled');
});
} else {
$('#errorDiv').slideDown(200, function(){
$('#errorDiv').html('<div class="alert alert-danger">'+data.message+'</div>');
$('#errorDiv').delay(3000).slideUp(100);
$('#btn-signup').html('<span class="glyphicon glyphicon-log-in"></span> Sign Me Up');
$('#btn-signup').removeAttr('disabled');
});
}
},3000);
},
error: function(){alert('Error!')}
});
return false;
}