Tutorial: Check Username Availability with jQuery and PHP

Many websites have user registration forms, where the user fills in the data like the Name, Username, password and many other details. The user then clicks on the submit button to get the error message “Username Not available!”. This really creates a bad impression on the user who has already invested a lot of time in filling in the form. In such cases developers need to take care of the username availability right when the user is filling in the username.

username_availability_check_using_jquery_php

In this tutorial we have tried to achieve the checking username availability using jQuery and PHP. In this tutorial we would be checking the username while the user is keying in the username. For this purpose we would be using two files index.php and available.php Ofcourse, you also need to set up the database and the table with the username field present.

Before proceeding, I have created a database named ‘user_avail’ and table named ‘user’ with id, username, fname and lname as its fields. The main field that we are concerned in this tutorial is the username field.

Step 1:

Create a normal index.php file where our form with username will appear.

<html>
<head>
	<title>User registration</title>
</head>
<body>

</body>
</html>

Step 2:

Now include a form tag with the name attribute as ‘registration’ inside the body tag. Inside the form element create an input element with type=text. Name the input element as ‘username’ also provide it and id with name ‘username’. We would be using this name and ID to identify the element from our jQuery. Now also create a div that will sit next to our input element, with id of the div as ‘available’. This is where the message of username being available or not available will appear.

<body>
<form name="registration">
	<div style="float:left;">Choose a Username: 
	<input type="text" name="username" id="username"></div>
	<div style="float:left;margin-left:5px;" id="available"></div>
</form>
</body>

Step 3:

Now we need to include the jQuery.js file into our document. You can always include a direct link of Google API which proves to be a faster way of accessing the jQuery functions. Include the script tag into the head tag

<head>
	<title>User registration</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
</head>

Step 4:

After the script tag we need to insert another script tag for javascript where we will be inserting our jQuery code for checking the username availability. This script tag should be inside the head tag. You could also include this script tag at the end of the HTML document, but for now we would be including it within the head tag.

<script type="text/javascript">

</script>

Step 5:

Within this script tag we need to first start with the document.ready() function. This tells that run the function whenever the document is ready.

<script type="text/javascript">
$(document).ready(function() {

})
</script>

Step 6:

Now, for this tutorial we are checking the availability of the username when the user is keying in the username. For this purpose we would be using the keyup() function of the input element username. This function is called whenever a character is keyed into the textbox. We would be using $(‘#username’). The # is used to identify an ID of the element, in this case the #username is the ID of our textbox.

<script type="text/javascript">
$(document).ready(function() {
	$('#username').keyup(function() {
	
	})
})
</script>

Step 7:

Inside this keyup() function, we would be using the $.post() method to send the username keyed in to another php file where we would be checking whether the username is available or not and then return the result back to our index.php The $.post() method is the same like $_POST in PHP. The $.post() method uses requires 3 parameters. $.post(‘URL’, { data&value }, Successfunction(data) {}) The URL is the url of the file where you want the username value to be sent to. The data&value is the data that you want to send. The successfunction gets the return message.

<script type="text/javascript">
$(document).ready(function() {
	$('#username').keyup(function() {
		$.post('available.php', { uname : registration.username.value }, function(result){
			$('#available').html(result);
		})
	})
})
</script>

The available.php is the file where we would be evaluating the username entered. uname is the variable that we would be sending to the available.php file The value of the uname variable is the value of the textbox which we have got form registration.username.value where registration is the name of the form, username is the name of the input element and value is the content of the textbox. The data that is then returned to the index.php file is presne tin the result variable of the function. We use the html() method to write the contents of the result variable into the div tag with available as the ID.

The comeplete index.php file

<html>
<head>
	<title>User registration</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('#username').keyup(function() {
				$.post('available.php', { uname : registration.username.value }, function(result){
					$('#available').html(result);
				})
			})
		})
</script>
</head>
<body>
	<form name="registration">
		<div style="float:left;">Choose a Username: <input type="text" name="username" id="username"></div>
		<div style="float:left;margin-left:5px;" id="available"></div>
	</form>
</body>
</html>

Step 8:

Now we create another file named available.php where we would get the username and then run a MYSQL query to see if the username is available or not and then return the result. Here we first need to see if $_POST is set or not. If it is set then we need to connect to the database and run the query. If the number of rows is 0 then the username is available and if it is 1 the username is not available!

<?php
if(isset($_POST['uname']))
{
	$uname = trim($_POST['uname']);
	mysql_connect("localhost","root","");
	mysql_select_db("user_avail");
	$uname = trim($_POST['uname']);
	$query = mysql_query("SELECT username FROM user WHERE username='$uname'");
	$num_rows = mysql_num_rows($query);
	if($uname == "")
		echo "Please Choose a Proper Username";
	else if(strlen($uname) < 6)
		echo "Username should be atleast 6 characters";
	else
	{
		if($num_rows == 0)
			echo "<div style='color:green;'>The Username is Available!</div>";
		else
			echo "<div style='color:red;'>The Username is Not Available!</div>";
	}
}
else
{
	echo "Please enter through a proper path";
}
?>

You should always keep in mind to use the mysql_reas_escape_string to avoid SQL Injection. This should be just it. Let me know if you have issues while implementing the code. This is just a basic template which you could easily use in your registration forms.

A total football nerd, he loves designing to the core and also likes to get his hands on some programming. He is the Co-Founder of ArtAtm. He hails from India. You may want to Follow Him On Twitter

Jitu – who has written posts on Artatm - Creative Art Magazine.


Leave a Reply