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

Comments

Anonymous at 27 Nov, 2006 12:20
I keep getting 'documentation is not defined' error.
Reply to this.
Binny V A at 31 Dec, 1969 03:59
Which browser(and version) are you using?
Reply to this.
Anonymous at 25 Apr, 2007 02:21
Opera 9.2 and it works
Reply to this.
pablim at 02 Jun, 2007 07:21
what about the license?
is GNU or Creative Commons compatible ?
Reply to this.
Binny V A at 03 Jun, 2007 01:57
BSD License
Reply to this.
Arnab C at 28 Aug, 2007 08:50
I figured out one inconsistency only in a particular situation, say if you have autocomplete feature turned on and while u typing in the email box you can see a list of emails say the emails that u have used sometime, the problem is that when u go through the list of emails using arrow keys and press "tab" then the email comes into the email box and the focus also shifts to the "submit" button but the color of the box border doesn't change, though haven't gone through your code but just noticed this and thought to let u know. Anyway thanks for your effort.

I am using (Firefox/2.0.0.6)
Reply to this.
Anonymous at 24 Jan, 2008 06:32
Im always concerned with browser compat.
It's fine in Gecko browsers but in Win IE5+ (boundary) its reloading with no results..
Reply to this.
Chat at 17 Feb, 2008 06:45
say if you have autocomplete feature turned on and while u typing in the email box you can see a list of emails say the emails that u have used sometime, the problem is that when u go through
Reply to this.
Comment


Comment




Comment Formating : HTML tags a, strong, em, b, i, code, pre, p and br allowed. Other tags will be shown as code(< will become &lt;). Urls, Line breaks will be auto-formated.