Post image for Username Availability Check in Registration Form using Jquery/PHP

Username Availability Check in Registration Form using Jquery/PHP

by Hyder

in Jquery, PHP

Very often while registering on a website ,you will notice that they usually have a username or email address availability check. This ensures that 2 users do not have the same username or email address. Some websites prefer to make this availability check when a user fill in all the details in the form and press submit while some other websites do a live username / Email Address Availability check when the “username” textbox loses focus. Personally, I would prefer to let the user know if a particular username is available while filling the registration form rather than after submitting the registration form.

Below are some screenshots  from the most popular websites ( gmail.com , yahoo.com and hotmail.com ) that have email address verification before the user submits the form .

Email address verification at Hotmail

Email address verification at Yahoo Mail

Email address verification at gmail.com

What will you learn in this tutorial ?

This tutorial teaches you how to do a live username availability check using Jquery. The ajax request is triggered when the “username” textbox loses focus.  A loading image is added next to the textbox during this  asynchronous request .  After it  has completed,  an icon will replace the loading image based on whether the username is available or not.

Online Demo || Download Source Code

Credits

The Background image in the textbox was generated from this Form Elements Generator . The loading Image is taken from Preloaders .Other icons are taken from IconsPedia .

Username is not Available

HTML/CSS Form Design

The code snippet below contains the code that makes up the form design .


body {
 font-family:Arial, Helvetica, sans-serif
}
#availability_status {
 font-size:11px;
 margin-left:10px;
}
input.form_element {
 width: 221px;
 background: transparent url('bg.jpg') no-repeat;
 color : #747862;
 height:20px;
 border:0;
 padding:4px 8px;
 margin-bottom:0px;
}
label {
 width: 125px;
 float: left;
 text-align: left;
 margin-right: 0.5em;
 display: block;
}
.style_form {
 margin:3px;
}
#content {
 margin-left: auto;
 margin-right: auto;
 width: 600px;
 margin-top:200px;
}
#submit_btn {
 margin-left:133px;
 height:30px;
 width: 221px;
}

<div id="content">
 <form action="user_check.html" method="get">
 <div>
 <label for="username">Username :</label>
 <input type="text" name="username" id="username"/>
 <span id="availability_status"></span> </div>
 <div>
 <label for="full_name">Full Name :</label>
 <input type="text" name="full_name" id="full_name"/>
 </div>
 <div>
 <label for="email">Email  :</label>
 <input type="text" name="email" id="email"/>
 </div>
 <div>
 <input name="submit" type="submit" value="submit" id="submit_btn" />
 </div>
 </form>
</div>

The Database Design

For the sake of simplicity ,i will not include the php database connection code here . You can download the full source code from the link provided above.

Database Structure

Jquery Code

This section contains the jquery Code that handles the Ajax request when the textbox loses focus .Based on the server response , the appropriate icon is appended to the <span> with id=”availability_status” .Almost every line of codes in commented below .


$(document).ready(function()//When the dom is ready
{
$("#username").change(function()
{ //if theres a change in the username textbox

var username = $("#username").val();//Get the value in the username textbox
if(username.length > 3)//if the lenght greater than 3 characters
{
$("#availability_status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');
//Add a loading image in the span id="availability_status"

$.ajax({  //Make the Ajax Request
 type: "POST",
 url: "ajax_check_username.php",  //file name
 data: "username="+ username,  //data
 success: function(server_response){

 $("#availability_status").ajaxComplete(function(event, request){

 if(server_response == '0')//if ajax_check_username.php return value "0"
 {
 $("#availability_status").html('<img src="available.png" align="absmiddle"> <font color="Green"> Available </font>  ');
 //add this image to the span with id "availability_status"
 }
 else  if(server_response == '1')//if it returns "1"
 {
 $("#availability_status").html('<img src="not_available.png" align="absmiddle"> <font color="red">Not Available </font>');
 }

 });
 }

 });

}
else
{

$("#availability_status").html('<font color="#cc0000">Username too short</font>');
//if in case the username is less than or equal 3 characters only
}
return false;
});
});

PHP Code

As you have probably noticed ,  the file “ajax_check_username.php” is called via ajax and the username is passed to the server . The code below query our database to check if the username is already in our database or not . It will either return the value “0″ or “1″ .


include('database_connection.php');
//Include The Database Connection File

if(isset($_POST['username']))//If a username has been submitted
{
$username = mysql_real_escape_string($_POST['username']);//Some clean up :)

$check_for_username = mysql_query("SELECT userid FROM member WHERE username='$username'");
//Query to check if username is available or not

if(mysql_num_rows($check_for_username))
{
echo '1';//If there is a  record match in the Database - Not Available
}
else
{
echo '0';//No Record Found - Username is available
}
}

That’s all Folks ! Got a Comment ? Criticism?Share it with us below !

Related Posts

  1. Create fancy contact form with CSS 3 and jQuery
  2. Designing a form using pure CSS enhanced with Jquery
  3. Building A registration System with Email verification in PHP
  4. Creating a Fancy Search Feature with PHP,Mysql and Jquery
  5. An Alternative to Pagination : Facebook and Twitter Style
After Post

{ 2 trackbacks }

Username Availability Check in Registration Form using Jquery/PHP Check body on me
May 4, 2010 at 4:01 am
Tweets that mention Username Availability Check in Registration Form using Jquery/PHP -- Topsy.com
May 4, 2010 at 8:15 am

{ 54 comments… read them below or add one }

suraya November 2, 2013 at 4:04 pm

A very good demo. Is there a way to freeze or hide submit button if username unavailable or if username too short.

Reply

John February 2, 2014 at 9:48 am

hi,

this is no longer valid in jquery 1.9+

$(“#availability_status”).ajaxComplete(function(event, request){

must be something like:

$(document).ajaxComplete(function(event, request){

Reply

Leave a Comment

Previous post:

Next post: