TL;DR

Luke Wroblewski did some sweet research on inline validations and found out that people think they are totally awesome. Brian Cardarella implemented that research in the gem client_side_validations. The gem automatically generates lots of client validations based on your rails model validations. I wrote an application showing some of its capabilities and how to extend its functionality. Alright guy, show me some source for how to use this gem. I don’t need the stinking source, just let me see your app.

The Long Version

Back in 2009, Luke Wroblewski performed some research on inline form validation and how users respond to different types of inline validations (i.e. javascript validations that give immediate feedback). People complete forms quicker, make fewer mistakes, and are more satisfied when filling out forms with inline validations.  When asked to fill out a registration form, people were 42% quicker at completing the form when inline validations were present. Awesome!

This is great information to have about the way people interact with forms on our websites. Imagine we are building our own registration form for our next sweet application and we add inline validation. Our users are going to be happier with the experience of registering, they will make fewer mistakes, and they will be able to start ACTUALLY using our totally-awesome application quicker. There is just one problem… Manually coding inline validations can be a somewhat cumbersome process. First, we have to make sure that our server-side validations are working properly. After we have tested the backend, we then need to manually code up a fair bit of javascript in order to get the inline validations working. Not only is writing this inline validation code often uninteresting (we want to get the real features like that cool video player implemented). There is also a very big maintenance issue with this approach; we are actually going to write the same validation code twice: once in Rails and once in Javascript. So now, whenever we update our backend validation logic, we need to remember to update our client validation logic as well. Wouldn’t it be great if there were a way to automatically generate our client validations based on our backend code?

Enter the shiny new (very-appropriately named) gem client_side_validations. Brian Cardarella wrote the client_side_validations gem as a result of Luke Wroblewski’s research. Check out Brian’s blog post on his gem. With a few simple lines of code, we can add inline validations to our forms. The validations are generated with the default form builder, formtastic, or simple_form. A lot of the rails model validations, including (but not limited to) length_of, presence_of, uniqueness_of, and format_of are all supported out of the box, so your forms will be making these validations as soon as you install and setup the gem. You can also add your own custom validators if what comes out of the box is not enough for your bleeding-edge rockin’ Rails application.

So how does it work? What does an application that uses this gem look like? How the heck can I use this thing with existing technologies? These are some questions your are undoubtedly asking yourself this second, and I will answer them (sort of).

How does it work?

It’s simple! The gem extends the Rails default form builder, and all you have to do is set a :validate => true option on any form_for (or simple_form_for for simple form users) tag that you want the inline validations for. The form builder uses some rails reflections on your model validations to generate some json that gets included in a script tag after your form. The json is then used by the gem’s Javascript framework to perform the validations that need to be performed.

What does an application that uses this gem look like?

I have built a sample application that uses this gem to perform inline validations on a very contrived user registration form. Here is the github source and here is the Heroku application. You can create a state in the database, then you can add cities to that state. Once you have done this, you can register with the system as a user. The state and city that you enter when registering validates against the database you create. Also, this site is very selective, and you must be born on a Monday in order to register (just to show off how date validations can work). The application is a little contrived (only aliens, or time travelers would use it), but it does illustrate some more advanced ways that you can use custom remote and local inline validators with your forms.

How does it integrate with existing technologies?

As stated previously, it integrates nicely with formtastic and simple form. The sample application also shows how to integrate with devise. Take special note of the regular expression that was added to the user model. This is necessary because the default regular expression that devise uses to validate an email address does not compile in the Javascript regular expression engine.

Check out the source.

See it in action on Heroku here.

Make sure to add your states and cities before you register! Also, I know you are supposed to be born on a Monday to use the site, but you can fake your birthday, I won’t get mad (I wasn’t even born on a Monday).