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
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
- Create table in database
- Database connection
- 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.
1 2 3 4 5 6 | 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
1 2 3 4 5 6 7 | <?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.
1 2 | <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.
1 2 | <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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?php 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html> <head> <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" /> </head> <body class="container-fluid mt-3"> <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> </body> </html> |
That’s it for today.
Thank you for reading. Happy Coding..!!
Thank you, its working and very useful!!
Glad it helped!
Subscribe us for weekly updates or like and follow us for regular updates.