Check username availability with Ajax

As you may have directly experienced, in the registration form of a large number of websites, and in the most important such as Google or Yahoo for example, typing an account username immediately triggers the availability check of the choosen username, before the entire form is submitted. Let's see if it is possible to use the same technique on the registration form of Joomla! 2.5 based sites.

This feature is possible with Ajax technology that is native in Joomla! using the Mootools framework. Integrating AJAX into the Joomla application may solve many problems and give your users the interactivity and speed of so-called Web 2.0. I recommend understanding AJAX before using it in Joomla application development, and suggest this useful reading: Ajax: A New Approach to Web Applications.

Here's a solution to implement a an available username checker on Joomla!

To implement this feature we need to change something of the normal Joomla! registration form behavior, but we don't want change any of the Joomla! core code. So we need to work on:

The php code code is self-explanatory. It needs to reside in a component controller and issued as a task. I'd like to point out that I've used a new component (see the javascript request url) instead of com_users for the reason that we don't want to change the core code. In the examples below you can see how this ajax check works.

When a username is typed, and when the on blur event occurs the ajax check is triggered and you are alerted by the check in progress message. In this example we are using an existing username (i.e., admin), the server side PHP script query, and the #_users table. You get a response if the user name exists, and like in this case, the result is printed on the span tag defined above in the overridden register layout and the username field is cleared after 3 seconds when the unavailable message disappears.

Conclusion

I hope that i've showed a quite easy way to add some ajax to your Joomla! site. This little feature was requested by some friends of mine, so I have coded this ajax username check in a free of charge extension listed on the JED.