Web Development Blog

by Ei Sabai Nyo

28 May, 2009

Check username availability using AJAX and jQuery    

Javascript

$.fn.checkAvailability = function() {
    $("#check-username").click(function() {
    if ( $('#username').attr("value") != '') {
        $('.loading').show();
        var username = $('#username').val().toLowerCase();
        $.get("check-username.php", { username:username } , function(data) { 
            //if username is already taken (FALSE)
             if (data == 0) {
                $('.loading').hide();
                $('.error').remove();
                $('.available').remove();
                $('#check-username').after('<span class="error"></span>');
                $('.error').text('Username is already taken.');
             } else {
                $('.loading').hide();
                $('.error').remove();
                $('.available').remove();
                $('#check-username').after('<span class="available"></span>');
                $('span.available').text('Username is available.');       
            }
        });
    }
});
 
$(document).ready(function() {
    $("#registration").checkAvailability();
});

xHTML

<form action="#" method="post" id="registration">
    <label for="username">Username</label>
    <input type="text" name="username" id="username" maxlength="30" />
    <input type="button" value="Check Availability" id="check-username" />
    <span class="loading"><img src="images/loading.gif" alt="Loading" /></span>
</form>

CSS

.loading {
    display: none;
}
 
.available {
    color: #060;
}
 
.error {
    color: #f00;
}

Backend

In this case, we are using a php script called check-username.php. However, the backend doesn’t have to be in php, it can be in any language .aspx (.NET), .do (Java), .cfm (ColdFusion), etc. The backend script just needs to return either 1 or 0 (True or False). 1 when the username is available and 0 when the username is already taken.

Recommended Books on jQuery

Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
Your name:   Your email:  

5 Responses to “Check username availability using AJAX and jQuery”

  1. Mikul Gohil says:

    fine example it is useful for newer jQuery Programmer as like me

  2. James says:

    Great Tutorial, however can you post the php source? Apparently mine isn’t returning the proper values.

  3. shakeel says:

    this is very helpfulsite for webdeveloper

  4. [...] Check username availability using AJAX and jQuery [...]

  5. palak abrol says:

    i need whole code. I have to implement it with Ajax ModalPopUp Extender

Profile PicHello! Welcome to Web development blog! My name is Ei Sabai and on this blog, I write about web development, mobile app development, latest web technologies and the likes. Read more about me or have a look at some of the tips & resources I've written.
Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.
We do NOT spam.
Your name:  
Your email:  

Tips & Resources

Tips & Resources
WordPress Web Hosting
Recommended web hosting providers for WordPress 3.0
iPhone Native App Development
Important steps into iPhone app development for beginners
iPhone Web App Development
Tips for iPhone web app development
Coupons for Web Developers
Get discounts on web hosting, domain names, templates, etc
10 Useful jQuery Snippets
Easy-to-use jQuery snippets for any website
HTML Email Newsletter
Step-by-step tutorial on how to code an HTML email newsletter
  • bluehost Hosting $6.95/month
  • Joomla Templates

Recommended Book

Categories