Comments on: AJAX Username Availability Checker Using MooTools 1.2

By: Anthony

Anthony — Thu, 26 Jan 2012 13:14:14 +0000

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??

By: David Walsh

David Walsh — Wed, 20 Jul 2011 13:19:56 +0000

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

By: Pete Jarvis

Pete Jarvis — Wed, 20 Jul 2011 11:28:03 +0000

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.

By: Ralf

Ralf — Mon, 31 May 2010 20:21:40 +0000

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;
}
}

By: Ralf

Ralf — Mon, 31 May 2010 18:36:00 +0000

@Garrick: you sure about this? o.o’

By: hollywood

hollywood — Wed, 21 Apr 2010 11:41:07 +0000

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.

By: Alex

Alex — Sun, 07 Mar 2010 17:30:54 +0000

corrected function, so that the images didnt 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’;
} }

By: geekasylum

geekasylum — Sun, 21 Feb 2010 07:59:43 +0000

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.

By: marien

marien — Tue, 15 Dec 2009 21:58:11 +0000

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!

By: softboy

softboy — Wed, 22 Jul 2009 13:58:30 +0000

Hi David, is it possible to add php file too ?

thanks for this