Prototype, Fabtabulous and Really Easy Field Validation

03 dec, 2007 | techniek | 0 Comments

Last weeks I have been working on a pilot project that involves a Web2.0-ish e-commerce site that offers insurances. It offers an (Ajax) cost calculation module that allows a user to fine-tune the insurance and subsequently purchase it online. First release was launched last week and works reasonably well.

For several reasons, usability being one of them, I choose to implement most of the presentation logic client-side, in the browser. For this I made use of the superb javascript framework Prototype. Prototype is an offshoot of the Ruby-on-Rails stack but has no technical dependencies with Rails. Prototype is rapidly gaining momentum and it is great to witness the birth and growth of an entire ecosystem of offshoots and best-practices on top of it. (Same things can be said of course of Dojo, Mootools and the Yui libraries. It will be interesting to see which one is still actively around in a couple of years’ time and in what form.)

I used two brand new libraries/solutions based on Prototype. First one was Fabtabulous, a single class solution for managing several tabs using hidden and visible DIV’s and a menu, or in my case, progress bar. The solution is entirely unobtrusive, so no ‘onclicks’ in your HTML. It also is an instructive showcase of Prototype programming. I am still waiting for a version that will make it back-button enabled, or should I try to create this myself ? Here is a start.

Secondly, I used Really Easy Field Validation. This is a quite comprehensive and generic framework for client-side Form Validation. It comes with a predefined set of validation rules on form input fields which can be easily extended (using javascript functional parameters). The error messaging is done by means of a generated message that is inserted into the DOM tree, or by making visible an existing but hidden message. Styleclass changes on the input fields are included. The validation rules are mapped to the form by defining them as CSS styleclasses on the particular form field. Is this misuse of style classes a breach with clean unobtrusiveness ? I guess so but hey, it sure is pragmatic and above all, it works !

This framework, again, is a showcase of Prototype’s power, and follows the ‘convention over configuration’ principle underlying Rails. Downside of it’s genericity is the performance: it only validates the visible fields in your form, which is great for me since I use it in combination with Fabtabulous. For this it does an upward treewalk on every form-field to determine visibility, which considerably slowed things down. Here I made a hack, broke the genericity, and injected some a-priori knowledge of the form it was going to work on to speed things up.

Writing this post I found out that all above mentioned libraries have been updated since my last check and that a compressed version of Prototype has become available, so back to work ! Check out the numerous Prototype posts on Ajaxian.



Would you like to share your thoughts?

Would you like to share your thoughts?

Geef een reactie

@2021 Plance. All rights reserved.