Every web application has lots of forms and Bemba is no different. And where there are forms, there is potentially invalid input. Hence, validation. As you’d expect, this too is an area with many “dos” and even more “donts”.

The general concensus is that you need to validate input in two ways. First, you need to make sure that bad data cannot be inserted into your application. Rails takes excellent care of this. One or two lines of code and you’re done. But these checks should also be performed in the browser. This is where it can get hairy fast.

In the past I have used my ‘custom’ javascript validation. This consists of nothing more than a simple switch to check every field for valid input. When there is no input, I would throw a javascript alert. Ugly, but effective.

In the first iteration of Bemba we opted for a custom solution based on Ajax and CSS. This worked quite well. On focus (when an input is deselected) I would make an Ajax call and this would set a CSS class if there was any error. It was unobtrusive and clean, but still lots of manual labor. Aka boring labor, aka lots of opportunities for bugs.

No more. We are now using livevalidation.

This is an excellent Javascript library which packs all kinds of nifty validation features into one library. All I need to do now is include the library in the html header and instantiate one LiveValidation javascript class per form input.

Sounds complicated? Really, it’s not. If you’re a web developer, follow the examples and you’re golden. I’ve since kicked out all custom validation cruft and use livevalidation exclusively. True, it doesn’t do built-in Ajax. But prototype does and that’s equally nifty. I just love the way livevalidation works with forms, shows error messages inline (and not in a modal window) and attaches itself to the onsubmit event, all without one single line of code required from me.