Username availability check using PHP, AJAX and MySQL

Sometimes we need to check username availability instantly before a user presses the submit button after filling a long-sized signup form. In this case we can use AJAX with any technologies like PHP, Codeigniter, Servlet, Struts, JSF, Spring etc. for checking whether the input username is avaialable or already occupied by someone else. So if we give instant result to the user for username availability then sometimes it makes more sensible than while pressing the submit button and goes top of the signup form to rectify the username input field if input username is not available.

This tutorial shows how to check username availability using PHP, AJAX and MySQL. So after finishing this example you will be able to apply the same logic to any PHP framework or any server side technologies.

If you need the similar example using Codeigniter framework and Servlet please read here Username availability check using Codeigniter, AJAX and MySQL and Username availability check using Servlet, AJAX and MySQL respectively.

This example uses JavaScript event onblur for checking user availability. onblur means when focus is out of a particular object such as inputbox, textarea etc.

Please feel free to contact me if you need any help on this.

Final output

Home page

php mysql ajax jquery

 

 

When username is already taken by someone else

php mysql ajax jquery

 

When username is available

php mysql ajax jquery

 

Prerequsites

Knowledge of PHP

Knowledge of MySQL Database

jQuery Libraries

jquery-1.9.1.min.js -> https://jquery.com/download/
jquery-migrate-1.2.1.js -> https://jquery.com/download/
jquery-ui-1.10.3-custom.min.js -> https://osdn.net/projects/sfnet_javanautics/downloads/js/jquery-ui-1.10.3.custom.min.js/

download_js

Directory Structures

 

PHP

live check username jquery ajax

First and formost thing is to create MySQL table, which will be used to store the user details information.

CREATE TABLE `user` (
`user_id` int(10) unsigned NOT NULL AUTO_INCREMENT,
`login_username` varchar(100) NOT NULL,
`login_password` varchar(255) NOT NULL,
`last_login` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`user_id`),
UNIQUE KEY `login_email_UNIQUE` (`login_username`)
) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=utf8;

Dump some data

We need to insert some data in order to complete the test that checks whether the functionality is really working as expected.

insert into `user`(`user_id`,`login_username`,`login_password`,`last_login`) values (1,'user1','$2a$08$S5IfrpOVOvFbbOSOmZpjsO5N9PXgEerTloK','2014-07-19 19:18:30'),(14,'user2','$2a$08$v1kJflweCK3FOcoAsmYAUCMxFa5Shh7c2','2013-11-17 19:22:46');

Before proceeding please look at the project structure so that you can put the required JavaScript files at the right place.

Example

Step 1. Put all js files under js directory. Create a view file auth.php with the following source code.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Check username availability using jQuery, AJAX</title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-migrate-1.2.1.js"></script>
<script src="js/jquery-ui-1.10.3-custom.min.js"></script>
</head>
<body>
<div style="margin: 10px 0 0 10px;width: 600px">
<h3>Codeigniter username availability check</h3>
<form id="signupform" style="padding: 10px;">
<fieldset>
<legend>Check username</legend>
<div>
<label>Username</label><br/>
<input type="text" name="username" id="username"/>
<div id="msg"></div>
</div>
</fieldset>
</form>
</div>
</body>
</html>
<!-- below jquery things triggered on onblur event and checks the username availability in the database -->
<script type="text/javascript">
$(document).ready(function() {
$("#username").live("blur", function(e) {
$('#msg').hide();
if ($('#username').val() == null || $('#username').val() == "") {
$('#msg').show();
$("#msg").html("Username is required field.").css("color", "red");
} else {
$.ajax({
type: "POST",
url: "process.php",
data: $('#signupform').serialize(),
dataType: "html",
cache: false,
success: function(msg) {
$('#msg').show();
$("#msg").html(msg);
},
error: function(jqXHR, textStatus, errorThrown) {
$('#msg').show();
$("#msg").html(textStatus + " " + errorThrown);
}
});
}
});
});
</script>

 

Step 2. Create a php file process.php for database query. Please go through the Database Connection tutorial for connecting to MySQL database.

<?php

require_once 'config.php';

$post_username = $_POST['username'];
if (isset($post_username)) {
$sql = "SELECT * FROM user WHERE login_username = '" . $post_username . "' LIMIT 1";
$result = dbQuery($sql);
if (mysqli_num_rows($result) > 0) {
echo '<span style="color:red;">Username unavailable</span>';
} else {
echo '<span style="color:green;">Username available</span>';
}
} else {
echo '<span style="color:red;">Username is required field.</span>';
}

Step 3. Run the auth.php file.

Thanks for your reading.

Soumitra Roy Sarkar

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials Twitter Facebook  Google Plus Linkedin

2 Replies to “Username availability check using PHP, AJAX and MySQL”

Leave a Reply

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