Ajax Check Username Availability Using MooTools 1.2

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.

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

See Also Following Topics:

• 25 Ajax Examples
• 15 Ajax- Edit in The Place Scripts.