Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

AJAX Username Availability Checker Using MooTools 1.2

By David Walsh on September 24, 2008

This post has been updated: Using jQuery or MooTools For Drag, Drop, Sort, Save. The code on this page is no longer best practice.

There a many examples of egregious usages of AJAX out there but every once in a while you find a great usage of AJAX. One great usage is the username availability checker. Why make the user submit their form if you can just use AJAX to let them know if it's available right away? Here's how you can implement a username available checker using MooTools 1.2.

View Demo Download

The MooTools 1.2 JavaScript

var dwAvailabilityChecker = new Class({
	
	//implements
	Implements: [Options],

	//options
	options: {
		trigger: 'keyup',
		offset: { x:0, y:0 },
		element: '',
		minLength: 5,
		availableClass: 'available',
		takenClass: 'taken',
		availableImage: '',
		takenImage: '',
		url: 'ajax-username-check.php'
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		
		//validate it
		this.validate();
	},
	
	//a method that does whatever you want
	validate: function() {
		this.options.element.addEvent(this.options.trigger,function() {
			if(this.options.element.value.length >= this.options.minLength) {
				var othis = this;
				var request = new Request({
					url: othis.options.url,
					method: 'get',
					data: {
						username: othis.options.element.value,
						ajax: 1
					},
					onRequest: function() {
						//remove existing classes
						othis.options.element.removeClass(othis.options.availableClass).removeClass(othis.options.takenClass);
					},
					onComplete: function(response) {
						//add class
						othis.options.element.addClass(response == 1 ? othis.options.availableClass : othis.options.takenClass);
						othis.injectImage(response == 1 ? othis.options.availableImage : othis.options.takenImage);
					}
				}).send();
			}
		}.bind(this));
	},
	
	//adds the image
	injectImage: function(image) {
		
		//figure out its position
		var pos = this.options.element.getCoordinates();
		
		var img = new Element('img',{
			src: image,
			styles: {
				'z-index': 100000,
				'position': 'absolute',
				'top': pos.top + this.options.offset.y,
				'left': pos.left + pos.width + this.options.offset.x
			}
		}).inject(document.body);
		
		
	}
	
});

Getting down to business, the validate function gets called as soon as the class is instantiated. Once the username gets to its designated minimum length, an AJAX request is sent on every keyup event. If the target script returns a positive response, the username is available and we should show the available CSS class and image. If the target script returns 0, the username is taken and the taken CSS class and image are displayed.

I'll assume that you know PHP/MySQL enough to scrub the input and validate the given username before making the query to the database.

The Usage

window.addEvent('domready', function() {
	var validator = new dwAvailabilityChecker({
		trigger: 'keyup',
		element: $('username'),
		availableImage: 'checkmark.jpg',
		takenImage: 'warning.jpg',
		offset: { x: 4, y: 4 },
		minLength: 4,
		url: 'ajax-username-check.php'
	});
});

When instantiating the class, you get to apply any styles and configuration you'd like.

View Demo Download

As always, here's the example. You can also download the class.

I love using AJAX for this purpose. This little request could save a user multiple page refreshes (due to form submission) if a username is already taken.

Recent Features

By David WalshApril 4, 2011
Convert XML to JSON with JavaScript
If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium. The experience has been great: using JavaScript to create easy to write, easy to test, native mobile apps has been fun. My...
By Eduardo BouçasJanuary 5, 2015
Write Simple, Elegant and Maintainable Media Queries with Sass
I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

Incredible Demos

By David WalshDecember 17, 2012
CSS calc
CSS is a complete conundrum; we all appreciate CSS because of its simplicity but always yearn for the language to do just a bit more. CSS has evolved to accommodate placeholders, animations, and even click events. One problem we always thought...
By David WalshMarch 27, 2013
Detect Pseudo-Element Animation Support
A while back I posted an interesting tidbit from Daniel Buchner which allows developers to detect DOM node insertions with JavaScript and CSS animations; an awesome trick driven by CSS animations. Lea Verou recently posted another detection snippet driven by CSS animations: detecting pseudo-element...

Discussion

John
You should write a custom control and submit it to the AJAX.NET community that would be a great tool to have provided with the AjaxToolKit

You can find information here: AjaxToolKit Community
Rexxars
I always wonder when I see lines like this one:

if(this.options.element.value.length >= this.options.minLength)

Why not just escape right away, and save yourself some indenting? I think it also makes the code easier to read.. So I’d just write

if(this.options.element.value.length <= this.options.minLength) return false;

Nice class though, and a good use of ajax indeed :-)

Garrick

Nice and simple class.

Instead of creating a new othis var at line 32, you can bind your onRequest and onComplete to pass in this.

onRequest: function(){
    this.options.element.removeClass(this.options.availableClass).removeClass(this.options.takenClass);
}.bind(this),
onComplete: function(){
    this.options.element.addClass(response == 1 ? this.options.availableClass : this.options.takenClass);  
    this.injectImage(response == 1 ? this.options.availableImage : this.options.takenImage);
}.bind(this)

david
@Garrick: Great work. I cringed with the “othis” variable. I wasn’t sure where to use bind(). I followed programmer rule #1: Make it work. Great addition though, and thanks for reading!
Daniel
That’s pretty slick, David. Thanks for sharing!
manik
Hi, I love this usage, but it is the very first thing i want to use AJAX for…i want to make my web more dynamic…and this is a great first step I think…

I had no problem aplying the JS class, but I dont know how to return the result of the check in axaj-username-check.php. It always returns “taken” status now…

(MySQL, PHP is no problem for me, just the mehcanism of returning the value)
Pierre
Nice class (nice blog too),

By the way you could also do the Request object creation in the “initialize” function.
The request object will not be constructed at every keypress.
Titan
Excellent David. Thank you.
Moksha
thanks, i have done it using asp.net plus ajax.net
will use this tutorial, it give more control over the code
Craig Walker
Excellent script David.

I have implemented it fone, but I am having the same issue as manik.

I am using my own script for checking handleChecker.php and i’m using a different field.

What do I need my handleChecker.php to return?

Thanks for your script and your help.

P.S. Tried posting code from handleChecker.php for you to view, but kept getting WP Error.
Garrick
Craig, you might want to consider Paste Bin or some other Paste site to have others check out your code..
Craig Walker
I never thought of Paste Bin Garrick, thanks for the shout.

http://pastebin.com/m31a32059

As you can see I echo a “1” and a “0”.
david
@Craig: That’s some really, really unsecured code. Also, I recommend changing “0” to “unavailable” and “1” to available.
Craig Walker
I keep getting a message about my message being spammy so I’ll make it short.
Still not working. Updated pastebin. Links to follow hopefully.
Craig Walker
I think it’s when posting 2 links.
http://pastebin.com/m62b9c921
Craig Walker
AND http://pastebin.com/m5c81e0e
manik
Uff, I finally solved the problem…the only thing was to add aposthropes to the output of 1 and 0 :D

But I have another issue…the script seems to add an image after each validation, but it doesnt remove any of the previous…i am using transparent images, so you can see last image overlaying the previous… :(

Do you know how to fix it please?
Craig Walker
manik can you paste your code for your ‘axaj-username-check.php’ please.

manik

@Craig:

  if($_GET['ajax']==1 &&
  $_GET['username']){
          $nick = sql_quote($_GET['username']);
          $count = mysql_fetch_array(mysql_query("SELECT
  COUNT(nick) AS num FROM members WHERE
  nick='$nick'"));
          echo ($count['num']>0) ? "0" : "1";
          exit;
      }

That’s no big deal. Other things which you should check is if your mysql connection is set up (usually you connect in the main page and include the others…but this request is sent just to this page) or if it isn’t blocked by htaccess etc. (same reason)

manik

@Craig:

if($_GET['ajax']==1 && $_GET['username']){
    $nick = sql_quote($_GET['username']);
    $count = mysql_fetch_array(mysql_query("SELECT COUNT(nick) AS num FROM members WHERE nick='$nick'"));
    echo ($count['num']>0) ? "0" : "1";
    exit;
}

Dont forget to establish mysql connection in this file and to check if it isn’t blocked via .htaccess or anything…best is to check it in the browser if it really returns 1 or 0.

Stig
Hello,

First of all thank you for your script. I’ve been able to integrate it with my usersystem and database. However could you show me how to disable the submit button when the username is already in use, because that would be a huge addition, since new members could still push the submit button allthough the username form is shown in red.

This would be a great help for me.

Thank you in advance,
Stig
manik
@Stig you’ll have to check it in the server-side script anyway (its very easy to turn off javascript) so it isnt that helpfull, is it? I think you tell the user by this script that it is taken…
Stig
Manik, thank you for your fast reply. I didn’t think about the fact that javascript could be turned off.
manik
@Craig I posted it alreday yesterday, but I cant see my posts even now here…maybe its awaiting moderation because it contained source code…i think the code you posted is ok.

But you should check if you have estabilished connection to mysql (the one u use in the page dooesnt count, this is another request) and if it isnt blocked by .htaccess etc.

I recommend to display your axaj-username-check.php with ?username=’foo’ and check if it throws some errors…if it writes 1 or 0, then its ok
Naren
Hello,

First of all thank you for your script. I’ve been able to integrate it with my usersystem and database. However could you show me how to disable the submit button when the username is already in use, because that would be a huge addition, since new members could still push the submit button allthough the username form is shown in red.

This would be a great help for me.

Thank you in advance,

NAREN
mezo
man how can i use it if i am using CreateUserWizard
John
I may be missing something here, but Im assuming this script checks for the taken usernames from a database. How do I implement this to check usernames in a database table?

Thanks for a great script!
david
@John: It’s basically just a quick query using some PHP.
Hugo
David, can you post a ZIP of this script with the PHP and MySQL table?
peter
Hi David,
could you please post the phpl file too.
Thanks in advance
Newman
Hi, all. I’m totally a newbie to Ajax, but I’d like to integrate this function with my usersystem and mysql database. But I don’t even know how and when it links to mysql database. Could any tell me how to do it step by step? Thanks in ahead.
Sorry for my poor English.
Thomas
Same problem as Newman …

Can you please guide me in adding php to this script please? I have no problem using php and mysql – my only problem is “WHERE” should I write the code.

Thanks,
Thomas
David Walsh
The PHP goes in the “header” of your login page, before any HTML output.
Thomas
Thank you David for your message.

Can you please provide a very simple example please? Since my question then is how am I going to ‘attach’ the script with the php.

Thanks
Thomas
Alfons
Hello David,

You know that your script are super ?
So I do not have to tell you this.

How can I get serveral events on one single function ? (mootools, ajax)
Do I have to do the instantiation for every single event (change, blur)
or is it possible to give to on instantiation several event that are all do the same
when the trigger is fired ?

Thank you for anwsering to this possible silliy question.

I need it, because with the event “change” the browser Firefox triggers on both,
when leaving the field per mouse or tab and when clicking on Enter.
But IE6 fires not when clicking on Enter.
So I need an event for both browser and had the idea to do the same with two
different events.

Best regards
Alfons
softboy
Hi David, is it possible to add php file too ?

thanks for this
marien
Hi David (and others)l,

I have the same problem as Manik before.
The script seems to pile up the images.

This way, you get an ugly stack of (png) images. How should / could I disable the image which was generated before the current one?

cheers and thnx for this otherwise great script!
geekasylum
A small correction to Garrick’s patch:
```
onComplete: function(){
```
should read
```
onComplete: function(response){
```
Thanks for a great class David, and especially thanks for the awesome tutorials.

Alex

corrected function, so that the images didn’t stack on each other!

injectImage: function(image) {
if ($('imago')) { $('imago').src=image} else {
		//figure out its position
		var pos = this.options.element.getCoordinates();
		var img = new Element('img',{
			src: image,
			styles: {
				'z-index': 100000,
				'position': 'absolute',
				'top': pos.top + this.options.offset.y,
				'left': pos.left + pos.width + this.options.offset.x
			}
		}).inject(document.body);
		img.id='imago';
	} }

hollywood
please can anyone give a coldfusion version of “ajax-username-check.php”. i just do not know anything about php or mysql. they both sound ridiculous to me. i do not even know how to set up the connection. please any help will be highly appreciated. thanks to you all in advance.
Ralf
@Garrick: you sure about this? o.o’

Ralf

I made some changes to the original code to be able to scan in various fields, here is

validate: function() {
		this.options.element.addEvent(this.options.trigger,function() {
			if(this.options.element.value.length >= this.options.minLength) {
				var othis = this;
				new Request({

					url: othis.options.url,
					method: 'post',
					data: {
						conteudo: othis.options.element.value
					},
					onRequest: function() {
						//remove existing classes
						othis.options.element.removeClass(othis.options.availableClass).removeClass(othis.options.takenClass);
					},
					onComplete: function(response) {
						//add class
						othis.options.element.addClass(response == 1 ? othis.options.availableClass : othis.options.takenClass);
						othis.injectImage(response == 1 ? othis.options.availableImage : othis.options.takenImage,othis.options.element.id);
					}
				}).send();
			}
		}.bind(this));
	},
	
	//adds the image
	injectImage: function(image,id) {
            if ($('img'+id)) { $('img'+id).src=image} else {
                //figure out its position
                var pos = this.options.element.getCoordinates();
                var img = new Element('img',{
                    src: image,
                    styles: {
                        'z-index': 100000,
                        'position': 'absolute',
                        'top': pos.top + this.options.offset.y,
                        'left': pos.left + pos.width + this.options.offset.x
                    }
                }).inject(document.body);                
                img.id = 'img'+id;
            }
        }

Pete Jarvis
Just want to say awesome tutorial. I have implemented this as a “forgotten password feature” where it checks for the email address in the DB before the user submits the form. One question I have is: is there anyway of injecting some text with the image so the user gets a message saying “sorry your email address isn’t in the DB” or something similar. thanks again. Great site.

David Walsh
Sure, you could probably make the image a DIV containing the image, then add any text you’d like.

Anthony
When entering an available user id it displays the checkmark and turns green like expected
but when backspacing and removing characters it fails to check the required number of characters required and stays green with a checkmark even when there are no characters
at all…..

It does this on your demo as well.

Any ideas how to fix??
Sashi
Hi,

I am using Joomla and I have a component TPJOBS and I want to Integrate your code. Please do let me know how to do? Also can you group this with PHP file? Here is my question

http://forum.joomla.org/viewtopic.php?p=2717281

I have tried with your codes but not working.

AJAX Username Availability Checker Using MooTools 1.2

The MooTools 1.2 JavaScript

The Usage

Recent Features

Convert XML to JSON with JavaScript

Write Simple, Elegant and Maintainable Media Queries with Sass

Incredible Demos

CSS calc

Detect Pseudo-Element Animation Support

Discussion