Effortlessly Verify Username Availability using jQuery and AJAX

Establishing an online presence has become crucial for individuals and businesses in the digital age.

Creating a username is among the initial steps toward achieving an online presence. However, the increasing number of internet users has made it challenging to find an available username.

You can tackle this issue by creating a username availability checker that can determine if a username is already taken or not.

In this tutorial, you will learn how to use jQuery AJAX and PHP to create a simple username availability checker.

---

Table of Content

1. Create a Table
2. Create a file for Database Connection
3. Create HTML Layout
4. Create a PHP File to Handle AJAX Request and Check Username Availability
5. jQuery – Send AJAX request to check username
6. Demo
7. Conclusion

---

1. Table structure

I am using users table in the example.

CREATE TABLE `users` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `username` varchar(80) NOT NULL,
  `fullname` varchar(80) NOT NULL,
  `password` varchar(80) NOT NULL
);

---

2. Database Connection

Create config.php file for database configuration.

Completed Code

<?php

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "tutorial"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
   die("Connection failed: " . mysqli_connect_error());
}

---

3. Create HTML Layout

To allow users to enter their desired username and view the availability response, create an input field and a div element for displaying the response. Assign the id "txt_username" to the input field and the id "uname_response" to the div element.

<div>
   <input type="text" id="txt_username" name="txt_username" placeholder="Enter Username" />
   <!-- Response -->
   <div id="uname_response" ></div>
</div>

---

4. Create a PHP File to Handle AJAX Request and Check Username Availability

Create ajaxfile.php file to handle AJAX request.

Next, read the username from the $_POST and assign it to variable. Execute SELECT query on the users table to check if the username is already taken. If the username is available then return a message saying "Available" otherwise, return a message saying "Not Available".

<?php
include "config.php";

if(isset($_POST['username'])){
    $username = mysqli_real_escape_string($con,$_POST['username']);

    $query = "select count(*) as cntUser from users where username='".$username."'";

    $result = mysqli_query($con,$query);
    $response = "<span style='color: green;'>Available.</span>";
    if(mysqli_num_rows($result)){
         $row = mysqli_fetch_array($result);

         $count = $row['cntUser'];
    
         if($count > 0){
              $response = "<span style='color: red;'>Not Available.</span>";
         }
   
    }

    echo $response;
    die;
}

---

5. jQuery – Send AJAX request to check username

Bind a keyup event to the #uname_response element. Validate the entered username, and then send an AJAX request to the ajaxfile.php file, passing the input value as data.

Upon receiving a successful callback from the server, write the response received in the #uname_response element.

<script>
$(document).ready(function(){

    $("#txt_username").keyup(function(){

         var username = $(this).val();
         var usernameRegex = /^[a-zA-Z0-9]+$/;

         if(usernameRegex.test(username) && username != ''){

              $.ajax({
                   url: 'ajaxfile.php',
                   type: 'post',
                   data: {username: username},
                   success: function(response){

                        $('#uname_response').html(response);

                   }
              });
         }else{
              $("#uname_response").html("<span style='color: red;'>Enter valid username</span>");
         }

    });

 });
</script>

---

6. Demo

View Demo

---

7. Conclusion

Creating a username availability checker using jQuery and AJAX is a straightforward and useful technique for any web developer.

With this technique, you can provide your users with instant feedback on whether a username is available or already taken. This not only saves time for your users but also helps to prevent frustration caused by repeatedly entering usernames that are already taken. With the increasing importance of online presence, having a username availability checker can be an excellent addition to any website or application.

By following the steps outlined in this article, you can create a simple and effective username availability checker that will enhance the user experience for your website or application.

If you’re interested in viewing the PDO version of this tutorial, you can find it here. Alternatively, if you’d like to learn how to check usernames using Javascript, you can check out this tutorial.

If you found this tutorial helpful then don't forget to share.