Tuesday, May 9th, 2006

Really Easy Field Validation with Prototype

Category: JavaScript, Library, Prototype, Usability

<p>Late last week I was working on a content submission form, and thinking about a good way to add unobtrusive validation using Prototype, similar to what the guys at Particle Tree have talked about in a couple articles earlier. I liked the approach the articles took and went looking for any libraries doing the same thing built on top of Prototype.

Enter Really Easy Field Validation. It lets you do the following with your form elements, using the class attribute to indicate what kind of validation is needed (assumes Prototype 1.5, included with Script.aculo.us 1.6.1):

  1. <input class="required validate-number" id="field1" name="field1" />

Then tell the library about your form:

javascript
< view plain text >
  1. <script type="text/javascript">
  2.   new Validation('form-id');
  3. </script>

This will check that “field1″ is populated and is a valid number onsubmit, and also onblur if you pass the immediate: true option into Validation. I was able to wire up my form with this in about five minutes, getting nice faded in error messages onblur with about two lines of code and the additional classes. I then added my own validator to count the number of words in a text area, which was also simple to add. CSS hooks makes it easy to style the error message to match your theme. The one thing that I really missed was being able to provide my own effects for the display and hide of the error messages – the “options” hook isn’t there yet but should be pretty easy to add.

THe author has provided a simple demo, and the latest version available for download is 1.2.1. Overall, a nice, clean library for quick unobtrusive validation with Prototype.

Related Content:

17 Comments »

Comments feed TrackBack URI

BTW, is there a website trying to centralize all prototype or scriptaculous based libraries ?

Comment by Strass — May 9, 2006

The optional effects hook is already on my list :)

Comment by Andrew Tetlaw — May 9, 2006

My common experience with form is that, the more sophisticated they are the more custom validation you will need none the less.

The problem arises when you need some combined validation.
“Salary should not be greater than 10K if the person is female, but if he is male there is no uplimit in salary plus he can add additional data to field x”

No I’m not discriminating males over females. But I guess you see what I mean. Form validation is an ever-growing monster. And when you aim to create a generic validator for all possible cases you end up with a truckload of garbage code in your library. Which possibly will grow ever more when you try to integrate a “yet another” business logic to it which you have not thought apriori.

(don’t get me wrong: I do not say scriptaculous is garbage. It is an excellent framework to make client-side coding easy and fun, and the Validator object demonstrated here does a good job.)

Though, the object is an excellent tool for “generic” forms (username, email, password type).

Comment by volkan ozcelik — May 10, 2006

Volkan, I totally agree with you. Things can get way out of hand when trying to handle all possible cases in your validation. I believe there is a difference between validation and business logic though. I always handle generic validation (username, password, dollar, float, char, etc) on the client side and business logic (“Salary should not be greater than 10K if the person is female, but if he is male there is no uplimit in salary plus he can add additional data to field x”) on the server side. For me, in my world, this has many advantages and keeps life simple (I am a developer/designer writing web applications for corporate clients).

I have been reading up on AJAX more and more and I am wondering if anyone has ever incorporated AJAX with this type of validation.

Anyway, I have to say I was not all that impressed with the demo. I found it quite hard on the eyes. Is it just me?

Comment by Jason — May 10, 2006

The default styles are not super great, but you can change them. It would be nice if the default error messages were prettier. Anyone volunteer a good design for the author to integrate?

Comment by Jon — May 10, 2006

Still kinda buggy. It works good in Firefox but in IE on the same form I only get the first error box showing up.

Comment by Jimmy — May 10, 2006

[...] A possible AJAX form validation solution: “Really Easy” Field Validation with Prototype. Not quite there yet, but very close. [...]

Pingback by Ajaxian » Really Easy Field Validation with Prototype - Matt Heerema : Web Design — May 10, 2006

Xforms is the answer if you need validation. See spec, XForms can validate based on W3C schema. For a semi complete javascript XForms please see FormFaces at source forge.

Comment by francisco — May 12, 2006

Strass: you should have a look at the Scripaculous wiki. It’s both about the library itself and Prototype:

http://wiki.script.aculo.us/scriptaculous/show/Prototype

Comment by Marco Lazzeri — May 19, 2006

Ajaxian » Really Easy Field Validation with Prototype

A possible AJAX form validation solution: “Really Easy” Field Validation with Prototype. Not quite there yet, but very close.http://ajaxian.com/archives/really-easy-field-validation-with-prototype

Trackback by Desarrollo Web — May 22, 2006

This was good and useful.. Thanks

Comment by anant bhatia — May 24, 2006

[...] Ajaxian Really Easy Field Validation with PrototypeAjaxian Really Easy Field Validation with Prototype. A possible AJAX form validation solution: Really Easy Field Validation with Prototype. Not quite there yet, but very close.http://ajaxian [...]

Pingback by Prototype » Prototype Services — May 25, 2006

It’s rather a great beginning, just few drawback:
- Id attribute becomes mandatory since you use it to add/remove the advice.
- No i18n of messages
- It would be great if validation rules could take arguments, format for date fields (I don’t know how to do it without adding custom attributes to HTML)
How about submitting your code to commons-validator ?
Thank you for this idea.

Comment by pmouawad — June 4, 2006

I think this is a bit misleading to call this ajax validation. You’re using ajax to show error messages, but there is actually no interaction with the server for the actual validation.

Comment by Jason — December 11, 2006

You can easy add server validation.
Just add new rules like :

['validate-unique-email', 'Cet email est déjà utilisé', function(v) {
var laRequete = new Ajax.Request(
'checkEmail.php', { method: 'post', asynchronous: false, parameters: 'email='+v });
return laRequete.transport.responseText;
}]

Comment by mike — December 15, 2006

Hi,

I do not think that is scalable such form of doing validation, using name classes. I think it looks cleaner if we use such model.

  1. var frm=new FormValidation();
  2. frm.addValidtion('field1','isNumber','Is not a number');
  3. frm.addValidation('field2','isNumber');
  4. frm.addValidation('field3','isEmail');
  5. frm.addValidation('field3','ajax:http://urlto.check.returns/true/or/fals','It has to be from qmail.com');
  6. frm.setErrorBehavior('stopOnFirst');//stop after miss validate
  7. //frm.setErrorBehavior('stopAtLast');

Such model cand be used in PHP, Perl or smth else.
Do you know such library that uses Prototype? Otherwise I’ll do it

Comment by Catalinux — May 2, 2007

Nice!

Extensible and easy to use – thinking of integrating this into PEAR QuickForm since I don’t like the native Javascript implementation.

Comment by Daniel Skinner — October 18, 2007

Leave a comment

You must be logged in to post a comment.