Really Easy Field Validation with Prototype

via ajaxian:

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 name="field1" id="field1" class="required validate-number" />

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.

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.

Leave a Reply

You must be logged in to post a comment.