Check username availability using PHP and jQuery

Today we’ll show you how to check username availability using PHP and jQuery. Generally we need to check if a username or email already exists or not during the registration process without submitting a form. So in this article, we will explain to you how we can check if a username is available or not using jQuery, Ajax and PHP.

check username exists php, Live Username Availability Check using PHP and jQuery AJAX, JQuery – Username Availability Validation using PHP and MySQL, How to Implement Check Username Availability Feature With AJAX & JQuery, username already exists validation in jquery, check if user already exists without submitting form, how to check if email already exists in database using jquery, how to check if email already exist in database without refreshing page, check if username is taken php.

Checkout more articles on PHP

file-exists-in-php" title="Check if a file exists in PHP">Check if a file exists in PHP
base64-to-image-file-in-php" title="Convert base64 to image file in PHP">Convert base64 to image file in PHP
Delete all files from a folder in PHP
Replace image src in HTML using PHP
Sorting Arrays in PHP

In this article we will take an example that contains a simple textbox for username. That textbox has an onblur event to validate the inserted username when the cursor leaves the textbox field. We will check the records in the database by calling the ajax request in background and display the appropriate message.

Steps to check username availability in PHP

table in database">Create table in database
Database connection
Bootstrap library">Include jQuery and Bootstrap library
Create HTML Form
Add jQuery Code
Write PHP Code
Output

1. Create table in database

First, Run the following script to create a table in the database.

CREATE TABLE `users` (
id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
username varchar(255) NOT NULL,
email varchar(255) NOT NULL,
password varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

2. Database connection

We have to create a file for database connection named `connection.php`.

connection.php

<!--?php
	$dbhost = "localhost";
	$dbuser = "root";
	$dbpass = "";
	$db = "demo";
	$con = mysqli_connect($dbhost, $dbuser, $dbpass , $db) or die($con);
?-->

3. Include jQuery and Bootstrap library

It’s time to create a HTML, so first we have to include the following jQuery and Bootstrap libraries in the head section of the page. jQuery will be used to work with Ajax call and for the styling bootstrap library will be added to the form.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

4. Create HTML Form

Now let’s create a simple form that contains an `input` text field for username and `div#uname_result` to display ajax response.

For demo purposes, we have taken only a single field but you can use the same logic in your real project.

<input type="text" name="username" class="form-control mb-1" autocomplete="off" placeholder="Enter Username" id="username">
<div id="uname_result"></div>

5. Add jQuery Code

Finally, we have to add jQuery code to handle the `blur` event of the input field. So when blur event trigger, send ajax request to `username_checker.php` file and shown response in the `div#uname_result` section.

<script>
  $(document).ready(function () {
    $('#username').on('blur', function () {
      var user_name = $(this).val().trim();
      if (user_name != '') {
        $.ajax({
          url: 'username_checker.php',
          type: 'post',
          data: { user_name: user_name },
          success: function (response) {
            $('#uname_result').html(response);
          }
        });
      } else {
        $("#uname_result").html("");
      }
    });
  });
</script>

6. Write PHP Code

Let’s create an `username_checker.php` file to check the username available or not from ajax call and return a suitable message.

username_checker.php

<!--?php<p-->

  include('connection.php');

  if(isset($_POST['user_name'])) {
    $user_name = $_POST['user_name'];
    $query = "SELECT count(*) as cnt FROM `users` WHERE username = '".$user_name."'";
    $result = mysqli_query($con,$query);
    $row = mysqli_fetch_array($result,MYSQLI_ASSOC);

    if($row['cnt']== 0){
      echo '<span class="text-success">Username <b>'.$user_name.'</b> is available!</span>';
    } else {
      echo '<span class="text-danger">Username <b>'.$user_name.'</b> is already taken!</span>';
    }
  }

?>

7. Output

Let’s combine all HTML code together in an `index.php` file and check the output.

index.php





  <title>Check username availability - Clue Mediator</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">



  <h4>Check username availability - <a href="https://www.cluemediator.com" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h4>
  <div class="row mt-4">
    <div class="col-md-3">
      <input type="text" name="username" class="form-control mb-1" autocomplete="off" placeholder="Enter Username" id="username">
      <div id="uname_result"></div>
    </div>
  </div>

  <script>
    $(document).ready(function () {
      $('#username').on('blur', function () {
        var user_name = $(this).val().trim();
        if (user_name != '') {
          $.ajax({
            url: 'username_checker.php',
            type: 'post',
            data: { user_name: user_name },
            success: function (response) {
              $('#uname_result').html(response);
            }
          });
        } else {
          $("#uname_result").html("");
        }
      });
    });
  </script>

Output - Check Username availability using PHP and jQuery - Clue Mediator

Output - Check username availability using PHP and jQuery - Clue Mediator

That’s it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

Github Repository