AJAX Username Availability Checker Using MooTools

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.