Question

I have a custom validator method that will check an inputted zip code against my database of accepted zip codes. I’d like to make this request asynchronous. Here’s how it looks currently:

jQuery.validator.addMethod("validZip", function(value, element){
    var isValid = false;
    $.ajax({
        url: '/xpress/wp-admin/admin-ajax.php',
        data: {action:"test_checkZip", zip:value},
        type:"POST",
        async: false,
        success: function(result){
            if (result == 0){
                isValid = false;
            } else {
                isValid = true;
            }
        } 
    });
    return isValid;
}, '*');

This request requires it to be synchronous because it is updating the variable that will be returned by the wrapping function. If i were to do this asynchronously the request would be completed in a non-blocking manner. The function would execute, do the request, however it would not wait for the response to update the boolean value that it would return. It’ll return the default false value before the ajax finishes and updates it to true.

I’ll need to explicitly notify the validator that an event has changed where it needs to revalidate the control. How can I achieve this idea of notifying the validator?

I need to do something like this:

jQuery.validator.addMethod("validZip", function(value, element){
    $.ajax({
        url: '/xpress/wp-admin/admin-ajax.php',
        data: {action:"test_checkZip", zip:value},
        type:"POST",
        async: true,
        success: function(result){
            if (result == 0){
                notifyZipControl(false)
            } else {
                notifyZipControl(true)
            }
        } 
    });
}, '*');

function notifyZipControl(isValid){
    if (isValid){
        // update the validator so the control becomes VALID
    } else {
        // update the validator so the control becomes INVALID
    }
}

Is this idea achievable?

Answer 1

This is definitely possible with a remote rule:

$("form").validate({
    rules: {
        zip: {
            remote: {
                url: "/xpress/wp-admin/admin-ajax.php",
                data: {
                    /* supply data besides the field value here: */
                    action: "test_checkZip"
                }
            }
        }
    }
});

Behind the scenes, validate is just using a $.ajax call, so you should be able to provide whatever flexibility you need.

Here’s a (poor) example that just checks to see if the zip code is 5 characters long (not really hitting a server in a meaningful way, but hopefully it will give you a good starting point): http://jsfiddle.net/HYLS4/