AJAX Username Availability Checker Using MooTools

The HTML

1<p><strong>Please provide your desired username: &nbsp;&nbsp;&nbsp;</strong>

The foundation of the system is the INPUT element with a specific ID. No other elements are required. The eventual IMG element will be generated by MooTools.

The CSS

.basis		{ padding:5px; border:1px solid #ccc; }
.available	{ border:1px solid #008000; background:#90ee90; }
.taken		{ border:1px solid #fc0; background:#fffea1; }

You’ll want to create three CSS classes: one that is always applied to the input, another class which represents an available username, and one last class to represent a taken username. Green is always good to use for positive results. As for how you denote a taken username, please don’t be a #f00.

The MooTools JavaScript

var AvailabilityChecker = new Class({

	//implements
	Implements: [Options,Events],

	//options
	options: {
		trigger: 'keyup',
		offset: { x:0, y:0 },
		minLength: 5,
		availableClass: 'available',
		takenClass: 'taken',
		availableImage: '',
		takenImage: '',
		url: 'ajax-username-check.php'
	},

	//initialization
	initialize: function(element,options) {
		//set options
		this.setOptions(options);
		this.element = document.id(element);
		this.lastValue = this.element.value;
		this.cache = {};
		//create the image which will display to the side
		var pos = this.element.getCoordinates();
		this.image = new Element('img',{
			src: '',
			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);
		//workers and removers
		this.comparer = function(response) {
			this.cache[this.element.value] = response;
			var state = (response == '1') ? 'available' : 'taken';
			this.element.addClass(this.options[state + 'Class']);
			this.image.set('src',this.options[state + 'Image']);
			return state;
		};
		this.remover = function() {
			this.element.removeClass(this.options.availableClass).removeClass(this.options.takenClass);
		};
		//create the request which will be frequently used
		this.request = new Request({
			url: this.options.url,
			method: 'get',
			link: 'cancel',
			onRequest: this.remover.bind(this),
			onComplete: this.comparer.bind(this)
		});
		//add listener
		this.element.addEvent(this.options.trigger,function() {
			var value = this.element.value;
			if(value.length >= this.options.minLength && value != this.lastValue) {
				this.validate(this.lastValue = value);
			}
		}.bind(this));
	},

	//a method that does whatever you want
	validate: function(value) {
		this.fireEvent('check');
		if(this.cache[value] != undefined) {
			return this.comparer(this.cache[value]);
		}
		else {
			return this.request.send('username=' + value + '&ajax=1');
		}
		return this;
	}

});

//USAGE!
window.addEvent('domready', function() {
	var validator = new AvailabilityChecker('username',{
		trigger: 'keyup',
		availableImage: 'checkmark.jpg',
		takenImage: 'warning.jpg',
		offset: { x: 4, y: 4 },
		minLength: 4,
		url: '<?php echo $_SERVER["PHP_SELF"]; ?>'
	});
});

The original class featured a host of problems. No element was required, a new Request was being generated every keystroke, results weren’t cached. Ugh. Those have all been fixed and I’ve added event functionality to the class. I’ve also implemented many new MooTools best practices.