Bigginers

Check username availability in PHP using AJAX

Pinterest LinkedIn Tumblr

If you are looking for the code to check username availability in PHP using ajax, then you are in the right place. Here I will provide the complete 100% working source code with a demo.

Username or email availability check is the most common feature used by a variety of websites and web applications. You might have seen this feature on most of the websites when you signup or fill a registration form.

Here I will show you an example so that you can understand more. This is a simple form accepts the username. When you type the username in the input box then it automatically searches in the database whether this username already exists or not without page refresh or page reload.

If the username already exists then it will give an error message or success message and vice-versa.

Files and Folder structure

check-username-availability-in-php-using-ajax-coding-birds-onlie-file-and-folders

There are 3 main files index.php,config.php and availability-check-script.php. These files are output file, connection file, and availability check logic file respectively. Others are just icons to show loading, error and success messages.

I will call onchange function of javaScript, which will receive the entered text in the input box and make an AJAX call to validate this username already exists or not.

<input type="text" name="username" id="username" class="form-control" onkeyup="checkUsernameAvailablity();" placeholder="Start typing username" autocomplete="off" required>

When defining this function, It will be like this.

<script type="text/javascript">
    function checkUsernameAvailablity() {
        var username = $("#username").val();
        if (username !="") {
            $("#usernameAvailabilityLoader").show();
            $.post("availability-check-script.php",{key:"usernameCheck",username:username},function (response) {
                var data = response.split('^');
                if (data[1] == "available"){
                    $("#usernameAvailableLabel").show();
                    $("#usernameNotAvailableLabel").hide();
                }else if (data[1] == "notAvailable"){
                    $("#usernameNotAvailableLabel").show();
                    $("#usernameAvailableLabel").hide();
                }
                $("#usernameAvailabilityLoader").hide();
            });
        }else{
            $("#usernameAvailabilityLoader").hide();
            $("#usernameAvailableLabel").hide();
            $("#usernameNotAvailableLabel").hide();
        }
    }
</script>

Complete Code

index.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png" type="image/x-icon">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Check username availability in php using ajax - Coding Birds Online</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
            <div class="card card-signin my-5">
                <div class="card-body">
                    <center>
                        <img width="50 " src="https://codingbirdsonline.com/wp-content/uploads/2019/12/cropped-coding-birds-favicon-2-1-192x192.png">
                    </center>
                    <h5 class="card-title text-center">Check Username Availability</h5>
                    <label>[ankit,manish,rohit not available]</label>
                    <form id="checkingForm" class="form-signin">
                        <div class="form-label-group">
                            <label for="inputEmail">Username<span style="color: #FF0000">*</span></label>
                            <input type="text" name="username" id="username" class="form-control" onkeyup="checkUsernameAvailablity();" placeholder="Start typing username" autocomplete="off" required>
                        </div> <br/>
                        <div class="form-label-group" id="usernameAvailabilityLoader" style="display: none">
                            <img src="loading-icon.gif"/>  <label for="inputEmail">Please Wait a moment...</label>
                        </div>
                        <div class="form-label-group" id="usernameAvailableLabel" style="display: none">
                            <img src="success-icon.png" width="20"/>  <label for="inputEmail">Username available</label>
                        </div>
                        <div class="form-label-group" id="usernameNotAvailableLabel" style="display: none">
                            <img src="error-icon.png" width="20"/>  <label for="inputEmail">Username not available </label>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function checkUsernameAvailablity() {
        var username = $("#username").val();
        if (username !="") {
            $("#usernameAvailabilityLoader").show();
            $.post("availability-check-script.php",{key:"usernameCheck",username:username},function (response) {
                var data = response.split('^');
                if (data[1] == "available"){
                    $("#usernameAvailableLabel").show();
                    $("#usernameNotAvailableLabel").hide();
                }else if (data[1] == "notAvailable"){
                    $("#usernameNotAvailableLabel").show();
                    $("#usernameAvailableLabel").hide();
                }
                $("#usernameAvailabilityLoader").hide();
            });
        }else{
            $("#usernameAvailabilityLoader").hide();
            $("#usernameAvailableLabel").hide();
            $("#usernameNotAvailableLabel").hide();
        }
    }
</script>
</body>
</html>

Run this Code

When you run this code you will get the following output if there are no errors. When you type any username in the box, then it will show the loader.

check-username-availability-in-php-using-ajax-coding-birds-onlie-checking-username

If the username is already exited it will show like this.

check-username-availability-in-php-using-ajax-coding-birds-onlie-username-not-available

And when username available means it does not exist already, then you will see this.

check-username-availability-in-php-using-ajax-coding-birds-onlie-username-is-available

Source Code & Demo

You can download the full 100% working source code from here. You check this demo also.

Conclusion

I hope you learned explained above, If you have any suggestions, are appreciated. And if you have any errors comment here. You can download the full 100% working source code from here.

Ok, Thanks for reading this article, see you in the next post.

Happy Coding 🙂

I am a professional Web / Software developer, B.Tech CSE, who has been working in PHP & CodeIgniter and WordPress for more than 2+ years and know it inside and out, including the creation of Web Apps, WordPress websites from scratch and their customization.

1 Comment

  1. vurtilopmer Reply

    It is really a nice and helpful piece of info. I’m glad that you shared this helpful info with us. Please keep us up to date like this. Thank you for sharing.

Write A Comment