I was reading Nettuts.com this week and saw the post by Matt Vickers on checking the availability of a username with Mootools. I tend not to use Mootools so i thought I’d replicate the technique using jQuery. The code degrades gracefully if JavaScript is disabled, it is advised that you always check the username against the database again, just before you add any data to the database.
The JavaScript
So to start with we have our jQuery on document ready function, within this we have an event listener .keyup function which when triggered runs the function ‘usernamecheck’. Within the ‘usernamecheck’ function we firstly assign the variable ‘username’ to the value of the input field with the id #username. We now run a few checks that the username input field isn’t empty and that its 4 or more characters in length. If everything is ok and the username variable is over 4 characters we can go ahead and make the ajax request. Its worth noting that because were checking the username against the database on keyUp we’re making a unique request each time. To help limit these requests we check that the username is more than 4 characters before perfoming an ajax request.


No comments yet, be the first one to post comment.