jQuery remote validation race condition

Question

I'm having a problem with the jQuery validate plugin and the remote validation rule, used in combination with the jQuery form plugin.

So I use the jQuery form plugin to intercept to form submition and if the validation fails, the form is not submitted. However, if the remote rule is already being validated (waiting for an answer from the server) the form will be sent anyway.

If it's before, or after everything works fine, as do the other rules I have for the form. But if I'm in the middle of the GET for the remote rule, then $('#myform').validate.form() will return true, and the form is submitted.

So the code looks like this :

$('#myform').ajaxForm({
   beforeSubmit: processRequest,
   success: processResponse,
   dataType: 'json'
 });

$('#myform').validate({
   rules: {
       onkeyup: false,
       title: { 
           required: true,
           remote: { url: 'check_title.php' }
       }
   }
});

function processRequest(formData, jqForm, options) {
    if (!$('#myform').validate.form()) {
        // cancel the form submition
        return false;
   }
   // do some stuff
   return true;
}

Is there a way to force waiting for pending remote validation ?

Or maybe I could leave only 'onsubmit: true' in the validation rules, so I'd be sure the validation happens only at submission time and waits for completion before returning a value for validate().form(), but's that my last resort.

Answer 1

I think you got it right in thinking you have to cause the remote validation to wait, because it sounds like a race condition

According to ajaxForm documentation you can pass in the standard $.ajax parameters

So what you can try is passing async: false into ajaxForm. That will cause the remote calls to block (syncronous).