Ok this is my first ever attempt at ajax form validation, and everything works as expected, the final true example will hold alot more input fields than in my testing scripts which are below.

The file is expected to get a lot bigger as in my testing I have only used 3 input fields, how can I improve on this:

HTML FILE

<form action="#" method="post">
<fieldset>
<legend>Login Details</legend>
<label>Your Email:</label><input id="email" name="email" type="text" onblur="return ajax ('email');" />
<label>Password:</label><input id="password" name="password" type="text" onblur="return ajax ('password');" />
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label>Your Username:</label><input id="username" name="username" type="text" onblur="return ajax ('username');" />
</fieldset>

<input class="submit" type="submit" value="Create Account" />
</form>

As you can see in the event of an onblur on the input fields I call the function ajax. I also send with the function a parameter which is exact to the id. Here is my function:

Javascript

function ajax (id) {

var value = $('#' + id).val();
$('#' + id).after('<div class="loading"></div>');

if (id === 'email') {

    $.post('http://www.example.com/ajax.php', {email: value},

    function (response) {
        $('#email_error, #email_success').hide();
        setTimeout(function(){
            $('.loading').hide();
                finish_ajax (id, response);
        }, 1000);
    });
}

if (id === 'password') {

    $.post('http://www.example.com/ajax.php', {password: value},

    function (response) {
        $('#password_error, #password_success').hide();
        setTimeout(function(){
            $('.loading').hide();
                finish_ajax (id, response);
        }, 1000);
    });
}

if (id === 'username') {
    
    $.post('http://www.example.com/ajax.php', {username: value},

    function (response) {
        $('#username_error, #username_success').hide();
        setTimeout(function(){
            $('.loading').hide();
                finish_ajax (id, response);
        }, 1000);
    });
} 
    
return false;
}

function finish_ajax (id, response) {

$('#' + id).after(response).fadeIn(2000);
} 

Here is what I have tried to do:

1. With the id that I send with the function I assign the value of the input field to a variable named value.

2. Using the same id I then assign a loading div which contains a gif image in my css.

3. Depending on the id send the correct request with the correct name so I can determine in my php file the correct validation is done on each of the input fields. Here is my php file.

PHP FILE

if (isset($_REQUEST['email'])) {

$q = $dbc -> prepare("SELECT email FROM accounts WHERE email = ?");
$q -> execute(array($_REQUEST['email']));

if (!filter_var($_REQUEST['email'], FILTER_VALIDATE_EMAIL)) {
    echo '<div id="email_error" class="error">This is not a valid email!</div>';
}

elseif ($q -> rowCount() > 0) {
    echo '<div id="email_error" class="error">Email already owns an account!</div>';
}
else {
    echo '<div id="email_success" class="success">Success!</div>';
}
}

elseif (isset($_REQUEST['password'])) {

if (strlen($_REQUEST['password']) < 6) {
    echo '<div id="password_error" class="error">Your password is not long enough.</div>';
}

else {
    echo '<div id="password_success" class="success">Password Success!</div>';
}
}

elseif (isset($_REQUEST['username'])) {

$q = $dbc -> prepare("SELECT username FROM accounts WHERE username = ?");
$q -> execute(array($_REQUEST['username']));

if (strlen($_REQUEST['username']) < 3) {
    echo '<div id="username_error" class="error">Has to be at least 3 characters</div>';
}   

elseif ($q -> rowCount() > 0) {
    echo '<div id="username_error" class="error">Username already taken</div>';
}
else {
    echo '<div id="username_success" class="success">Username available</div>';
}
}

else {

header('Location: http://www.projectv1.com');
exit();
}

Here I check the name of the request, and perform the correct validation.

I have tried to do this as best I can and there may be many errors in it performance wise which I am not aware.

Thanks for your time :)