Check username availability using PHP and ValidationEngine
Description :
Today in this article We create a simple bootstrap form with username filed then we validate the field by using jQuery ValidationEngine after then We create a custom rule or selector in jQuery ValidationEngine.js file i.e., ajaxUserValidate. Now ,we assign this custom rule to data-validation-engine attribute of User Name input filed in form that should be understood by the jQuery ValidationEngine to perform the action. So,If you assign succesfully then jQuery ValidationEngine send the data to serevr side and loads our web page with server response asynchronously.
Finally, We get a value in server side then we processing this value to check this username is already existed or not in database by using MySQLi querys. Suppose, If username is existed in database server returns false otherwise returns true.
Step1 :
Add below code in HTML head
[css]
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/validationEngine.jquery.css">
<link rel="stylesheet" href="css/Check-username-availability-using-PHP-and-ValidationEngine.css">
[/css]
Step2 :
We create a simple form with Bootstrap . Add below code in HTML body
[html]
<div class="container">
<div class="row">
<div class="registration_form">
<div class="page-header">
<h1>Check username availability using PHP and ValidationEngine</h1>
</div>
<form class="form-horizontal" role="form" method="post" action="#" id="register-form">
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">User Name:</label>
<div class="col-sm-6">
<input type="email" name="userName" class="form-control" id="userName" placeholder="Email" data-validation-engine="validate[required,custom[email],ajax[ajaxUserValidate]] text-input" data-errormessage-value-missing="Your Email is required!" >
</div>
</div>
</form>
</div><!-- end for class "registration_form" -->
</div><!-- end for row -->
</div><!-- end for container -->
[/html]
Step3 :
Add below code in end of HTML body
[javascript]
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="js/jquery.validationEngine.js"></script>
[/javascript]
Step4 :
In jquery.validationEngine.js file we created custom rule or selector i.e., ajaxUserValidate in the below manner.It is important to every one please assign this selector(what you cretaed) to data-validation-engine attribute of User Name input filed in form that should be understood by the jQuery ValidationEngine otherwise it's not working it shows an error.
[javascript]
"ajaxUserValidate": {
"url": "validate.php",
// you may want to pass extra data on the ajax call
"extraData": "name=eric",
// if you provide an "alertTextOk", it will show as a green prompt when the field validates
"alertTextOk": "* This username is available",
"alertText": "* This user is already existed",
"alertTextLoad": "* Validating, please wait"
}
[/javascript]
Note:Please assign your custom rule or selector in below manner to data-validation-engine attribute of User Name input filed in form that should be understood by the jQuery ValidationEngine
[html]
data-validation-engine="ajax[your selector]"
[/html]
Step5 :
Add below code in JavaScript
[javascript]
$(document).ready(function() {
jQuery("#register-form").validationEngine();
});
[/javascript]
Step6 :
In backend we created users table with two columns(id,User_name) in check-username-availability-using-php-and-validationengine database .
[php]
CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`User_name` varchar(128) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
[/php]
Step7 :
Here , We create a db.php file to connect with a database by using MySQLi
Create db.php file
[php]
<?php
$username = "root"; //username
$password = ""; //password
$host = "localhost"; //host
$dbname = "check-username-availability-using-php-and-validationengine"; //database
$con = mysqli_connect($host,$username,$password,$dbname);
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>
[/php]
Step8 :
Create validate.php file
[php]
<?php
/* RECEIVED VALUE */
$validateValue=$_REQUEST['fieldValue'];
$validateId=$_REQUEST['fieldId'];
$validateError= "This username is already taken";
$validateSuccess= "This username is available";
/* RETURN VALUE */
$arrayToJs = array();
$arrayToJs[0] = $validateId;
require_once('db.php');
$sql_select = "SELECT User_name FROM users WHERE User_name = '$validateValue'";
$res = mysqli_query($con,$sql_select);
if (mysqli_num_rows($res) > 0) {
$arrayToJs[1] = false;
echo json_encode($arrayToJs); // RETURN ARRAY WITH ERROR
} else {
$arrayToJs[1] = true;
echo json_encode($arrayToJs); // RETURN ARRAY WITH success
}
?>
[/php]