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.
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
- One validation should be linked to multiple fields - Eg. 'password' and 'confirm password' field.
- Different error messages for different errors in the same field - If email is incorrect, one error message will be shown and if it is not present another error message will be shown.
- Multiple validation for the same field.
- Some predefined checks - like email address, date, phone, name etc.
- And more - much much more