I've been playing with some form validation stuff for CF. I had been usign , but I wanted the HTML interface to act a bit more like the Flash interface, but I don't really want to use Flash. I've also been doing a lot more work with some of the DHTML libraries that AJAX has made popular, so I figured there had to be a relatively elegent way to do form validations with something like Ajaxian about easy form validation and decided to give it a try. The article on Dexagogo shows how they created a library to handle form-validations that doesn't require any other work than creating a form. This was just what I was looking for!

Basically, you just need the latest files from script.aclo.us with the latest prototype version (the 1.5 release candidate is included in the latest script.aculo.us lib folder), and the validation library. Convienently, they're all included in the demo file on the site.

To use this, you really only need prototype and the validation library (script.aculo.us adds a nice effect – much like the Flash format in cfform). For me, I made these calls:

This is slightly different than the example on their page; they load the effects.js file directly, I'm calling the library via script.aculo.us with the load parameter. This isn't really a big deal for one library, but it is convenient when you want to use several, but not all, of the libraries (e.g. scriptaculous.js?load=effects,dragdrop,slider).

Anyway, to actually use this, you need to create a form with an id attribute:

Now, we add some fields and use the class attribute to call the validator:

There are 11 options for use in the validation library (this is directly off their page):

• required (not blank)
• validate-number (a valid number)
• validate-digits (digits only)
• validate-alpha (letters only)
• validate-alphanum (only letters and numbers)
• validate-date (a valid date value)
• validate-email (a valid email address)
• validate-url (a valid URL)
• validate-date-au (a date formatted as; dd/mm/yyyy)
• validate-currency-dollar (a valid dollar value)
• validate-one-required (At least one textbox/radio element must be selected in a group)

This is really nice, because if you want to allow an optional field, but validate it, you can do:

There's one more piece of the pie...to call the validation library. At the bottom of your page add:

The first argument is the id attribute of the form you're wanting to validate. The second tells the Validator object what to do. This particular example enables validation on each field as you leave it (which I find useful). Some of the other options are:

• stopOnFirst (boolean): Stop on the first validation failure; default: false
• onSubmit (boolean): Override the default behavior of adding an even listener to the onsubmit event (set to false if you want to make sure your onsubmit method gets called no matter what); default: true
• immediate (boolean): validate when the cursor leaves the field; default: false
• focusOnError (boolean): place the focus on the first field with an error; default: true
• useTitles (boolean): make field validators use form element title attributes as error advice message; default: false
• onFormValidate (string function): call a function when the form is validated
• onElementValidate (string function): call a function when an element is validated

What I thought was really cool was the ability to add custom validation types via an API. Say you only want folks to use capital letters for their names, you simply add a new validation type like:

Want to add several? You can do that too:

This should be all of the normal items included in (plus a couple extra for good measure). Now the only thing left is to make it look pretty. One of the nice things about the Flash format in is that it color codes required fields with the different halo effects. To obtain a similar effect in the forms, we'll use style sheets instead.

This is a rather light stylesheet, but it'll give you something to start with (based on the default haloGreen skin):