 Home

 Subscribe
To search, type a

Youhack.Me

Username Availability Check in Registration

Form using Jquery/PHP
By Hyder On May 4, 2010
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
fromIconsPedia .

Username is not Available

HTML/CSS Form Design

The code snippet below contains the code that makes up the form design .
01 body {
02  font-family:Arial, Helvetica, sans-serif
03 }
04 #availability_status {
05  font-size:11px;
06  margin-left:10px;
07 }
08 input.form_element {
09  width: 221px;
10  background: transparent url('bg.jpg') no-repeat;
11  color : #747862;
12  height:20px;
13  border:0;
14  padding:4px 8px;
15  margin-bottom:0px;
16 }
17 label {
18  width: 125px;
19  float: left;
20  text-align: left;
21  margin-right: 0.5em;
22  display: block;
23 }
24 .style_form {
25  margin:3px;
26 }
27 #content {
28  margin-left: auto;
29  margin-right: auto;
30  width: 600px;
31  margin-top:200px;
32 }
33 #submit_btn {
34  margin-left:133px;
35  height:30px;
36  width: 221px;
37 }
01 <div id="content">
02  <form action="user_check.html" method="get">
03  <div>
04  <label for="username">Username :</label>
05  <input type="text" name="username" id="username"/>
06  <span id="availability_status"></span> </div>
07  <div>
08  <label for="full_name">Full Name :</label>
09  <input type="text" name="full_name" id="full_name"/>
10  </div>
11  <div>
12  <label for="email">Email  :</label>
13  <input type="text" name="email" id="email"/>
14  </div>
15  <div>
16  <input name="submit" type="submit" value="submit"id="submit_btn" />
17  </div>
18  </form>
19 </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 .
01 $(document).ready(function()//When the dom is ready
02 {
03 $("#username").change(function()
04 { //if theres a change in the username textbox
05  
06 var username = $("#username").val();//Get the value in the username textbox
07 if(username.length > 3)//if the lenght greater than 3 characters
08 {
$("#availability_status").html('<img src="loader.gif"
09
align="absmiddle">&nbsp;Checking availability...');
10 //Add a loading image in the span id="availability_status"
11  
12 $.ajax({  //Make the Ajax Request
13  type: "POST",
14  url: "ajax_check_username.php",  //file name
15  data: "username="+ username,  //data
16  success: function(server_response){
17  
18  $("#availability_status").ajaxComplete(function(event, request){
19  
20  if(server_response == '0')//if ajax_check_username.php return value "0"
21  {
 $("#availability_status").html('<img src="available.png"
22
align="absmiddle"> <font color="Green"> Available </font>  ');
23  //add this image to the span with id "availability_status"
24  }
25  else  if(server_response == '1')//if it returns "1"
26  {
 $("#availability_status").html('<img src="not_available.png"
27
align="absmiddle"> <font color="red">Not Available </font>');
28  }
29  
30  });
31  }
32  
33  });
34  
35 }
36 else
37 {
38  
$("#availability_status").html('<font color="#cc0000">Username too
39
short</font>');
40 //if in case the username is less than or equal 3 characters only
41 }
42 return false;
43 });
44 });

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″ .
01 include('database_connection.php');
02 //Include The Database Connection File
03  
04 if(isset($_POST['username']))//If a username has been submitted
05 {
06 $username = mysql_real_escape_string($_POST['username']);//Some clean up :)
07  
08 $check_for_username = mysql_query("SELECT userid FROM member WHERE
username='$username'");
09 //Query to check if username is available or not
10  
11 if(mysql_num_rows($check_for_username))
12 {
13 echo '1';//If there is a  record match in the Database - Not Available
14 }
15 else
16 {
17 echo '0';//No Record Found - Username is available
18 }
19 }
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
Tagged as: Ajax, Jquery, Live Availability Check, PHP

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

17 comments… read them below or add one

TomPier May 6, 2010 at 1:58 pm

great post as usual!

Codeforest May 13, 2010 at 8:49 am

I really like the way you blog. This is simple, yet effective way of user friendly form.
Hyder May 14, 2010 at 8:34 am
Thanks Zvonko :)

Zemo Zamster July 27, 2010 at 3:55 pm

Great work pal…

ajay August 16, 2010 at 2:49 am

hey dude…..nice posts…I liked it..

ramesh September 11, 2010 at 3:16 pm

sir how can apply this code in my php where i apply it

david kjoller October 16, 2010 at 10:18 pm

Like many of the forms/registration I’ve checked, this one has all kinds of errors in functioning.
There are so many I won’t try to list them.

You get a D for putting something on the page.

Max November 9, 2010 at 3:46 pm
Works great except it keeps saying ‘checking availability’. Everything looks good on my side. Any
clues?

feenzy November 11, 2010 at 2:49 pm

Nice tutorial. =)

Fabio December 2, 2010 at 8:29 pm

great work!

arun ak December 21, 2010 at 4:30 am

This tutorial really helped me to do my assignment…thanks

fadia February 4, 2011 at 7:48 pm

Thanxxxxxxxxxxxxxxxx a lot

Sandipan February 12, 2011 at 1:28 pm

Thank you for such a wonderful article….Keep up the good work.

aman February 22, 2011 at 8:01 pm

Thanks to your entire team,…….i have tried 100’s of websites on google but none of them helped
me ……but the way u guys explained it was awesome……….hi5 to all of u…

thankkkkkkkkkkkkkkkkkkkkkkkkkkkkkk youuuuuuuuuuuuuuuuuuuu

aman February 22, 2011 at 8:04 pm

@Max

1. u need to change the data base name in database_connection.php

2. Change table name in ajax_check_username.php
Then it will wrk fine …post again if u need anymore help

ElYair February 24, 2011 at 11:43 am

nice tut! very helpful. thanks

Mohammad Raihan Mazumder March 5, 2011 at 5:08 am

Its helpfull. But can i have compelete registration form, login page & protected sample page.

Raihan
Email: [email protected]
Leave a Comment

Name *
E-mail *
Website

Submit

Previous post: Creating a Fancy Search Feature with PHP,Mysql and Jquery

Next post: An Alternative to Pagination : Facebook and Twitter Style

 Get Tips Emailed to You !

Email : 

Subscribe

 Recent Posts

o Calculate Mysql Database size

o An in-depth overview of PHP And Curl
o Create fancy contact form with CSS 3 and jQuery
o 8 awesome plug in to Generate Chart/Graph in Web Application
o Dynamically Generate PDF Files In PHP

 Tag Cloud
Ajax Chart Components PHP Contact Form CSS Curl Database Size Delete using Jquery Downlaod file with

PHP FacebookForms Form Validation jQUery FTP File in PHP Generate Chart Generate GraphGenerate PDF with

PHPInformation_schema  JqueryjQuery Graph Live Availability CheckLogin programmatically with

PHPMySQL Pagination  PHP  Search System Send Email PHP Table SizeTabular Data CSS Twitter

 FlickRss Gallery

 Recent Comments

o Hyder on Creating a Fancy Search Feature with PHP,Mysql and Jquery

o ss on Creating a Fancy Search Feature with PHP,Mysql and Jquery

o Adrian on Live Character Count with Progress bar using Jquery

o Alek on Create fancy contact form with CSS 3 and jQuery

o Enthony on Building A registration System with Email verification in PHP

Copyright 2010 - Youhack.Me.

WordPress Admin