What's the best method to create an AJAX user name validation handler?

I'm developing a social networking website, and improving the front-end with some spit and polish.

One of the improvements I'm implementing is an AJAX validator for chat names. The set-up is this:

Visitor heads to registration page and t开发者_运维百科he visitor types their desired chat name into a field. Whilst typing, the user is given instant feedback as to whether that chat name is already in use, contains illegal characters, is the wrong length etc.

I've got this working: I've set up a simple PHP script to act as an AJAX handler that's bound to my input's onkeyup and blur events. However, each request involves a database query which can't be good.

My question is: how can I streamline this? Surely a database query upon each onkeyup or blur is not a good idea?

I recommend the following (time-based) strategy:

1. Keyup fires
2. Cancel timeout (if one is running at the time)
3. Start a new timeout (500 - 1000 ms)
4. Do the request when the timeout expires

This way you can do a request everytime the user stops typing for at least 500 - 1000 ms. This saves you some requests while the user is still typing. You can start the request immediately when the blur-event is fired, since the user is not typing any more, obviously.

Example (using jQuery) with 500 ms:

var timeout = null;

var stopTimeout = function () {
    // step 2: stop running timeout
    if (timeout !== null) {
        clearTimeout(timeout);
        timeout = null;
    }
};

var doRequest = function () {
    // step 4: do request
};

// step 1: event fires
$('input').keyup(function () {
    stopTimeout();
    // step 3: start new timeout
    timeout = setTimeout(doRequest, 500);
}).blur(function () {
    stopTimeout();
    doRequest();
});

As others stated, checking for invalid characters, etc. should be done client-side as well as server-side, since you cannot trust the client.

Checking for a valid username is the only way as it will need to go to your database. I'd suggest putting the logic for checking for invalid characters into the javascript and then only check for a avaiable and valid username onblur, this way you will only have to make a request each time the user clicks away from the field.

Of course, although putting your validation into the js, you should still check it in the php

All of the validation (illegal characters, length etc) should be done client-side and shouldn't need to run server side until the form is submitted.

Checking the username can be done realtime via ajax. Unless you've got a really slow server or large amount of users, it should be fine.

I wouldn't really recommend blur from a usability point of view, rather onkeyup or get the user to click a link/button next to the field.

Users don't necessarily know that they triggered a blur (especially if the blur happened as the result of focusing on another field), so they may not be able to figure out how to repeat the the check again if the ajax returns an error with their username. Rather make it obvious to them how they are triggering the ajax.

Thanks to @elusive, I came up with the following solution:

jQuery.fn.inlineValidation = function() {
    return this.each(function() {
        var input = $(this);
        var timeoutId = 0;
        $(this).bind('keyup', function() {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(function() {
                var value = input.val();
                $.getJSON('/ajax/user_name.php', { 'user_name': value }, function(data) {
                    if (data.success === true) {
                        input.next('.form_feedback').removeClass('error').addClass('success').text(data.message);
                    } else {
                        input.next('.form_feedback').removeClass('success').addClass('error').text(data.message);
                    }
                });
            }, 1000);
        });
    });
};