Sep
6
Live Validation – Cross Platform, Rails style validation on the client.

Posted: 6th September 2007
Tags: Javascript, php, Ruby on Rails, UI Design, Web Design, web development
Posted in Javascript, Ruby on Rails, Usability
Comments: 1 Comment »

I came across a great new validation library the other day which I wanted to share with you all. Live Validation by Alec Hill is a cross-platform client-side JavaScript validation framework which provides real-time feedback to the user as they type.

val2

val1

LiveValidation in action

As I am currently reading the highly recommended Designing the Obvious: A Common Sense Approach to Web Application Design which discusses the use of Poka Yoke (Japanese for “mistake proofing”) devices on the web. One of which is the use of real-time validation to provide feedback to users as they make the error, rather than waiting to submit the form (which could extend beyond the screen) and finding that they cannot proceed. Sometimes searching for where they have made an error can be a challenge in itself! This client side validation library fits the bill nicely. Hoekman may argue that actually Alec is a little aggressive in his technique of pouncing on errors before the user has had a chance to get it right but I feel it is nice that the user can see as they type whether the field is valid.

Although this library seems clearly aimed at Rails developers (which I will elaborate on next) the library is fully cross platform/cross browser compatible, It has been tested across a large cross section of browsers on different platforms and can be used with any server side technology such as PHP, Ruby on Rails, ASP, Java, Python etc.

I mentioned the library is aimed at Rails developers and this is because the naming of validators for the JavaScript library closely match those built into the Rails Framework. There are the following validators build in:

Presence
Format (using Regular Expressions)
Numericality
Length
Inclusion
Exclusion
Acceptance
Confirmation
Email

It is not clear if you can validate against a custom function, for example allowing you to create a AJAX request to the server to check Uniqueness of user names or email addresses on a registration form [I will contact Alec to clarify]. Validations can be combined together on a single field, so for example you can check if a field is required or not. Another nice feature is that you can check whether the whole form has validated, allowing you to prevent submission to the form as suggested by Alec, or use this to only enable the submit button once the form is valid as advocated by Hoekman.

Setting up validation on a field is easy, for example to Validate presence you would need the following code:

var f1 = new LiveValidation(‘f1‘);
f1.add( Validate.Presence );

The script is available as a standalone version or for integration with Prototype and is released under the MIT licence.

For more information see: livevalidation.com

Comments below..

Permalink | dzone | 1 Comment »

Comments

Note: You can leave a response, or trackback from your own site.

Jon
1/11/2007
2:44 pm

Comment:

I followed up my query regarding using a custom validator with Alec and have documented his response here.

Add a comment:

Sep6Live Validation – Cross Platform, Rails style validation on the client.

Comments

Sep
6
Live Validation – Cross Platform, Rails style validation on the client.