Tuesday, May 9th, 2006p>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:
- new Validation('form-id');
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.