Ever since I started creating web forms, I have been implementing some sort of javascript validation. This often involved a fair bit of javascript attached to the onsubmit events of the forms. I was even using a Dreamweaver extension that did this for me!

I’ve since been shown the light, and tried some other javascript validation. One package gave me the idea for creating a method of providing validation using Class names on form elements, no messy javascript. Another package showed me more in depth how to accomplish it. But it was based on the Prototype library, and I would have to include that to my scripts (which is fairly large for such a simple task).

So I wanted to write my own. I wanted to apply class names to inputs, textareas, selects, checkboxes and radios and have the form validated without any javascript written into the html at all.

Just as a bit of technical stuff here, it was easy enough to add a listener to the form submissions, but not easy to stop the default action (ie, return false) to the form this way. A forum gave me advice to use the YUI library with it’s event handling to stop the event. And it works, yay! So I guess I too have a package to accompany my script, but the two files required are very small compared to the Protoype script.

How to use

It’s simple enough. In your page, reference the YUI library and event scripts (v0.12 are included in the package for you). Also reference the jsvalidation.js file, which will perform the checking.

Next, create your form. Try to be XHTML compliant, for all of us! Now depending on the type of form elemen you create:

• text, password and textareas
  Add these classes to the element. You can add more than one class to an element, seperating them with a space. Don’t add two contradicting validations though.
  • required – Will make this field required. Reccomended to use with other classes too.
  • validate-number – Field contents must be a number
  • validate-digits – Field contents must be digits, but spaces are also allowed
  • validate-alpha – Field contents must be alphabetical characters only
  • validate-alphanum – Field contents can be alphbetical and numerical, no punctuation
  • validate-date – A valid javascript date value
  • validate-email – Field must be an email address
  • validate-url – Field must be a URL (including the http://)
  • validate-date-au – A valid date formatted as dd/mm/yyyy
  • validate-currency-dollar – A valid dollar value
• select elements
  Add these classes to the select element. You can add both if you like.
  • validate-not-first – Make the user choose an option that is not the first on the list
  • validate-not-empty – Make the user choose an option that has a value that is not null
• radio and checkboxes
  Add this class to only one of the options in a group of radio inputs or checkbox inputs.
  • validate-one-required – At least one checkbox/radio element must be selected in a group

Error messages are defined by adding the title attribute to the same element as the class name with validation. If no title has been specified for any of the failed elements, a friendly message will appear to hide your lazyness.

After validation

The script will check the form elements for valid entries, and apply an additional class name to the elements depending on the success or failure of the validation. For example:

• text, textarea, password: Adds validation-passed on success, and validation-failed on failure
• select elements: Adds validation-passed-sel on success, and validation-failed-sel on failure
• radio and checkboxes: Adds validation-passed-cr on success, and validation-failed-cr on failure

The reason I created different classes for the types of elements is for the flexibility of the designer. You may want a red background for a failed text element, but not for a failed select element.

Also, a messagebox will be displayed with a list of defined error messages, or a simple message if no specific error messages were defined.

Features of the script

In addition to just form validation, this script is intuitive. It will not try to validate hidden fields, or even fields that are not clearly visible to the user (hidden by CSS properties).

I’ve also added a minimum length option to text, textarea and password fields. Similar to the maxlength attribute, you can insert a minlength=”x” attribute to these inputs.

This script is not a class. But merely functions. There are some dependancy functions it requires that I have written myself, including:

• addClassName(element,class)
• removeClassName(element,class)
• isVisible(element)
• string trimming functions

If you’re a javascript programmer, you may find these useful. The source is also included with the package.

Download and Preview

• Preview the YUI based Validation script
• Download the YUI based Validation script (v2.0, 2008-03-04)
• Preview the Prototype based Validation script
• Download the Prototype based Validation script (v2.0, 2008-03-04)

Update:
Version 2 has a few fixes and now includes a validate-regex class you can apply. This only applies to text fields, and requires a regex= attribute to be applied to the element.

Another Update:
A Prototype version of this script is now available (and it’s smaller!).

Technorati: yahoo, yui, javascript, validation, unobtrusive