Using JQuery Validation in Rails Remote Form

In a recent project, I was trying to use JQuery Validation in an earlier version of Rails 3 remote form (jquery-ujs). They didn't work out well in IE.

After experimenting with the latest jquery-ujs and making an embarrassing mistake, it turns out that the issue is resolved in the latest version.

(Mistake: You may notice I removed a previous post about this topic, where I mistakenly concluded the latest jquery-ujs is not working with JQuery Validation. Thanks to JangoSteve for pointing it out. The post was misleading, so I believe it's best to remove it to avoid confusion. :-)

Get the latest jquery-ujs

There are 2 reasons to use the latest jquery-ujs:

1. it has a patch that fixes the issue (see issue #118).
2. it exposes an internal function that we may need -- $.rails.handleRemote() (see more details)

Working example

The example is tested with:

• JQuery 1.6.1
• JQuery Vaidation 1.8.1
• Latest Rails UJS (commit: dad6982dc592686677e6)

Try run the example page on IE7/8: /quirks/jquery-validate-ujs-conflict/jquery-ujs-latest.html

When using submitHandler in JQuery Validation

If you are using JQuery Validation's submitHandler(form) function, you need to call $.rails.handleRemote( $(form) ) function manually, so that it submits the form via XHR.

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