Live Validator 1.00.A Beta

Live Validator is a JavaScript program that will validate any form field as the user types the data using the regular expressions that you have specified.

Documentation

Demo

A Simple Demonstration





To see a working example of this script, see my registration page.

Code

Download Live Validator 1.00.A Beta(4.2 KB)

Features

Key Validation
Valides the key as you type it. For example, if you just want numbers in a field, the user will not be allowed to enter alphabets.
Live Validation feedback
If the field validates, the color of the element will change
Attach a form to the validation.
This will show error when the form is submitted
Reasonable size
4.2 KB uncompressed
Works in most major browsers.
At least the ones I tested in - Firefox 1.5/Linux, Firefox 1.5/Windows, IE 6, Opera 9/Linux, Opera/Windows
And more...
Many more features...

Working

You must provide a regular expression for every field that must be validated. If the regular expression matches the field value, the field will be given the class name 'validation-success' - if not, it will have the class name 'validation-error'. You can change the way the validation shows by changing the properties of these two classes in the style section. The fields that must be validated must have the class name 'live-validate'.

For example, lets take a look at some basic Phone Number Validation. This should have 7 Numbers - so the Regular expression is /^[0-9]{7}$/

XHTML

<label for="phone">Phone #</label>
<input type="text" name="phone" id="phone" class="live-validate" />

JavaScript

Bind the field with its validation at page load.

function init() {
	documentation.getElementById("phone").setAttribute('match',"^[0-9]{7}$");
	Validate.init();
}
window.onload=init;

CSS

.validation-error {
	border:1px solid red;
}
.validation-success {
	border:1px solid green;
}

More on how to use the advanced features of live validate.

The Future

This technique is not destined to live long. You might have heard of comming technologies like XPath, Web Forms etc. These will make my script obsolete as they provide a much easier way to do this. So this method will be outdated when the above mentioned ideas become standard and implemented in all browsers. We can expect this by, say, 2015.

To Do

blog comments powered by Disqus