- SPLessons

Check username availability using PHP a...

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

Check username availability using PHP and ValidationEngine

Check username availability using PHP and ValidationEngine 


Hi Friends, Today in this article I am going to explain about how to  Check username availability using PHP and ValidationEngine.

What is jQuery ValidationEngine ?

jQuery ValidationEngine is a  Javascript plugin . This aimed at the validate the  form fields in the browser. The plugin provides visually appealing prompts that grab user attention on the subject matter. Now, by using Validation Engine, All the data submitted through a form is valid, The Validations range from email, phone, and URL and the best part is Ajax compatibility.

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


<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">

 

Step2 :

We create a simple form with Bootstrap . Add below code in HTML body


<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 -->

 

Step3 :

Add below code in end of HTML body


<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>

 

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.


"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"
}

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

data-validation-engine="ajax[your selector]"

Step5 :

Add below code in JavaScript


$(document).ready(function() {
 jQuery("#register-form").validationEngine();
});

 

Step6 :

In backend we created users table with two columns(id,User_name) in check-username-availability-using-php-and-validationengine database .


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 ;

 

Step7 :

Here , We create a db.php file to connect with a database by using MySQLi

Create db.php file


<?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();
 }
?>

 

Step8 :

Create validate.php file


<?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
 }

?>