Using Rails Remote Forms With JQuery Validations

In every language/platform, there are many hidden features which you think deserve better recognition than they actually do. I mean, it doesn’t hit you until this feature solves you a two-days-never-been-seen-before problem, but after that, you want to praise the lord for gracefully granting it to us, human being.

Introducing $.rails.handleRemote()

Last time I had this kind of epiphany was when I dealt with JQuery validations and RoR remote forms, this time a little guy named $.rails.handleRemote() came to my rescue.
So what does this method exactly does? Exactly what you’d expect it to do – provide you, the developer, with a trigger to the default behavior of rails remote forms submission. Definitely a powerful tool to have in your kit if you’re messing a lot with plain JQuery in your app. Let’s take a simple example as to why:
I have a User model with a name attribute and I want to make a remote form for creating one. This is my form:

If you ever used JQuery Validations you’d probably be familiar with the following code:

What it does is to verify the user name input text field has some text in it, and if so – runs the submitHandler()

The Problem

This code does not work for two reasons:

1. $(form).submit() does not return us the XHR object so we cannot hook .fail(), .done() and .always() callbacks.

2. This code actually runs in an infinite loop of validate/submit/validate/submit… and never really submits the form.

handleRemote() Handles It Pretty Well

What lead me to a solution was the simplest thought: on submitHandler(), I just want the form to be submitted as if JQuery Validations was not involved at all. Since jquery_ujs.js is the file responsible for all RoR javascript/AJAX generation I thought it would be a great place to figure out how Rails treats remote forms. I love comments when they are rare, short, descriptive and helpful. This was exactly what I was looking for:

// Submits "remote" forms and links with ajax
    handleRemote: function(element) {...}

Replacing the submit() with Rails handleRemote() just solves it all. Even better, this one returns you the XHR object generated from the AJAX request:

Lesson Learned

I think one of the most important lessons I learned from this case is the importance of reading the source code for whatever you’re using. I know, it is so much fun to just use stuff without even having a clue about how they work on the background, and I definitely don’t suggest one should go through all of the source code he’s using, but I do suggest to keep it as a valid option for a rainy day. Apart from revealing you hidden gems like this, it turns big scary monsters into plain coded ideas – who would have thought that the whole feature of :remote => true could be fully understood with just a 2 minutes glance at the source code? It is so worth the while.

One thought on “Using Rails Remote Forms With JQuery Validations

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s