Question

I’m using the Jquery Validation plugin to validate my form on the client before submitting.

There is a specific field in my form that I want to validate using ajax to the server, once the user has filled out that field (onblur).
(Basically it’s the username field, I want to check on the server if the username is available and show a message accordingly)

Here is the code I’m using to validate my form:

$(document).ready(function()
{
     $("#signupForm").validate({
        submitHandler: ajaxSubmitForm});

});

(ajaxSubmitForm is just the js code that submits the form)

How can I use the Jquery Validation plugin to have the username field send its value to the server (using ajax) when it has changed and have the server return a result that somehow marks that field as valid on the client so the rest of the validation works?

Thanks

Answer 1

You can do this using the remote rule on that element. You’d apply like so:

$('#signupForm').validate({
    rules: {
        username: {
            remote: 'check_username.php' // this is the service page that returns true/false
        }
    }
});

Then to trigger the validation on blur, you add the following:

$('input[name="username"]').on('blur', function() {
    $('#signupForm').validate().element(this); // this triggers the single element validation
});