jquery validation silently ignored on IE - when using rails ujs driver + jquery-validation + ajax form

not clear to me whether the problem is with the ujs driver or the jquery-validate plugin...

when using jquery UJS driver (most recent, from github) + jquery-validate plugin (most recent, from github) + ajax form (via the data-remote tag), the validation rules are silently ignored. only in IE 8, chrome and FF work fine

tested with jquery 1.4.4 and jquery 1.5.1, using most rece开发者_如何学编程nt jquery-validation from github.

here is a simple example: http://avioing.com/validate/example.html and http://avioing.com/validate/example_no_ujs.html

try submitting the form while leaving the cityfield empty. nothing will happen in the first case. you will see a validation message triggered in the second case.

the only difference between the two files is that i removed "data-remote" tag from the form in the latter file, and now validation is triggered.

I posted this as an issue on jquery-ujs/github, and with the help of the jquery-ujs team we identified an issue which involves IE < 9, jquery, and jquery-ujs, and the way submit event bubbling is handled in IE vs. other browsers.

the jquery-ujs team developed a work-around (see discussion here https://github.com/rails/jquery-ujs/pull/123), but as of this writing the fix has not yet been pulled into the jquery-ujs tree. the concern is whether the issue should be fixed in jquery or jquery-ujs.

in the meantime, i believe that you can manually patch your rails.js to work around this issue based on the pull request on github.

Solution was posted by teohm on http://teohm.github.com/blog/2011/05/25/using-jquery-validation-in-rails-remote-form/

$('#submit_form').validate({

  submitHandler: function(form) {
    // .. do something before submit ..
    $.rails.handleRemote( $(form) );  // submit via xhr
    //form.submit();                  // don't use, it submits the form directly
  }

});

Hope it helps