Tuesday, May 9th, 2006
Really Easy Field Validation with Prototype
Category: JavaScript, Library
, Prototype
, Usability
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):
- <input class="required validate-number" id="field1" name="field1" />
Then tell the library about your form:
- <script type="text/javascript">
- new Validation('form-id');
- </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.
BTW, is there a website trying to centralize all prototype or scriptaculous based libraries ?
The optional effects hook is already on my list :)
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).
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?
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?
Still kinda buggy. It works good in Firefox but in IE on the same form I only get the first error box showing up.
[…] A possible AJAX form validation solution: “Really Easy” Field Validation with Prototype. Not quite there yet, but very close. […]
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.
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
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…
This was good and useful.. Thanks
[…] 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 […]
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.
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.
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;
}]
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.
Such model cand be used in PHP, Perl or smth else.
Do you know such library that uses Prototype? Otherwise I’ll do it
Nice!
Extensible and easy to use – thinking of integrating this into PEAR QuickForm since I don’t like the native Javascript implementation.