Live username availability check using jQuery Ajax and PHP

  •  
  •  
  •  
  •  
  •  
  •  

During user’s registration or sign up users need to enter a unique username in the form. So to prevent duplicate username in the database table you must check instantly the entered username is unique or not. Unique username help to easily identify the unique user. In this tutorial we will teach you live username availability check using jQuery Ajax and PHP.

Live username availability check using jQuery Ajax and PHP

Live username availability check using jQuery Ajax HTML form

<form action="" name="userForm" id="userForm" method="post">
  <label>Username : </label>
  <input type="text" name="username" id="username" value="" autocomplete="off" />
</form>

This HTML form simply receives a user given username and validates it through the jQuery Ajax and PHP.

jQuery Ajax handler to check username availability

$(document).ready(function() {
  $("#username").change(function() {
    //Remove any span after the text field
    $(".aval,.exists,.wait").remove();
    //Display a loading gif image
    $("<span class='wait'></span>").insertAfter("#username");
    var username = $(this).val();
    if(username != "") {
      var len = username.length;
      if(len >=5 && len <= 10) {
        //Username must be 5 to 10 characters long.
        //Change accrodangly yours
        $.ajax({
          url:"check_username.php",
          data:{uname:username},
          type:'POST',
          success:function(response) {
            var resp = $.trim(response);
            $(".aval,.exists, .wait").remove();
            if(resp == "exists") {
              //If username already exists it will display the following message
              $("<span class='exists'>Username is already exists!</span>").insertAfter("#username");
            } else if(resp == "notexists") {
              //If username is available it will display the following message
              $("<span class='aval'>Username is available!</span>").insertAfter("#username");
            }
          }
        });
      } else {
        //If the given username is less than 5 or greater than 10 this warning will display
        $(".aval,.exists, .wait").remove();
        $("<span class='exists'>Username must be 5 to 10 characters long!</span>").insertAfter("#username");
      }
    } else {
      //If the field is empty then remove any span after the text field
      $(".aval,.exists, .wait").remove();
    }
  });
});

Create a js file in the root folder. Name it “jquery_ajax.js” and write the above contents in it. The above jQuery Ajax code receives the given username and validates it. If any changes are made in the username text field the $(“#username”).change(function() {….}) function will be called. If it returns “exists” then a message “Username is already exists” will be displayed otherwise “Username is available” will be displayed beside the username text field. You can use keyup() function instead of change() function. The difference is that it call the $(“#username”).keyup(function() {….}) function each and every time when a button is released.

Username availability check from mysql database using PHP

<?php
if(isset($_POST['uname'])) {
  $sql = "select * from `user_details` where `username`='".mysqli_real_escape_string($con, $_POST['uname'])."'";
  $res = mysqli_query($con, $sql);
  if(mysqli_num_rows($res) == 1) echo "exists";
  else echo "notexists";
}
?>

Create a php file in the root folder. Name it “check_username.php” and write the above content in it. Based on the given username a very simple MySql query will execute. It will return “exists” if the username is already exists otherwise will return “notexists“.

About Mitrajit

Leave a Reply

Your email address will not be published. Required fields are marked *

Prove you are a human *