While working on the infrastructure behind Raise Your Vote, our site for voting information and registration, we faced an interesting challenge. Registering to vote is a complicated process with different eligibility rules in each state, but we wanted to make registering as straightforward as possible. Some existing user experience research indicated that inline validations would increase our conversion rate from site visitors to registered voters when compared to traditional server side validations. Otherwise, it would be frustrating for site visitors to fill out a complete registration form, press submit and wait a moment before being able to see if they completed the form properly.

We decided that we needed a way to model the complex validation rules for each state in a way that allowed us to use the same rules both inside our backend Ruby on Rails application and in javascript. Maintaining two separate sets of validations would be a maintenance nightmare given the complexity involved. After a bunch of iterations we came up with client_side_validations.

It works like this:

Model
Validate your models as you normally would

Layout
You currently need both jQuery and the jQuery Validate plugin loaded before you load Client Side Validations

View
Have a form ask for client side validations by passing :validate => true

That should be it! Your form will now have javascript validations that match your model validations.

For both Rails 2 and Rails 3 examples check out our client_side_validations_examples or visit the project itself on Github for complete documentation.