In General: This library a set of client-side validation scripts that check for compliance with several common data formats as well as the presence contents in required fields. The library validator routines can be used to conduct both intermediate checks, as the user enters data, as well as a final validation when the user submits the form.

The library has recently been revised to exploit DOM and CSS capabilities in modern browsers (IE 5+, NS 6+ et al). But note that the forms using the script will continue to function in non-DOM enabled browsers and with JavaScript off. Provided, error checking in these browsers has to be conducted server side.

Using this libary requires a familiarity with, obviously, HTML as well as at least a basic understanding of JavaScript. A less elegant, more plug-n-play version can be found here.

 

 

Validator Functions

Here is a list of the individual field validators along with a brief description of each function (followed by key to the required parameters):

IsEmail(c,r)	is a valid email address
IsPhonenumber(c,r)	is a valid 10 digit phone number. can include: " -.()"
IsZip(c,r)	is a valid 5 or 9 digit ZIP code
IsPlaintext(c,r)	includes only numbers and english letters
IsInteger(c,r)	is an integer
IsNotHtml(c,r)	does not include markup
IsSecure(c,r)	is a secure password
IsEqual(c,m,r)	matches value of specified field
IsSelected(c)	a valid option is selected
IsRequired(c)	a required field has contents

And here is a brief key to the arguments required by the validators:

c = control-reference

r = required ( 0 | 1 | false | true )

m = reference to matched control

Examples of calls to the validators as well as specific syntax for passing the arguments can be found in the discussion below.

Intermediate Validation (onchange)

Intermediate content checks can be called from onchange events associated with each form field, meaning they will be called only when the user enters or edits some content in field but not when e.g. just tabbing through the form or leaving the current window (as would happen with onblur).

<INPUT name=email onchange=IsEmail(this,1) />

If the validator function discovers an error, it will generate an inline DOM-enabled warning and change the CSS class of the warning node to red text. If the user corrects the error, the warning will disappear and the CSS class will reset to normal.

Note that most of the formatting validators accept two parameters: a reference to the control to be validated; and an integer, either 0 or 1 indicating whether the field is a required (1) or optional (0).

There are, however, three exceptions: IsEqual(), IsRequired() and IsSelected().

IsEqual() compares the values of two controls for absolute equality and accepts an addtional parameter which is a reference to the field to which the current control is to be compared:

<INPUT name=confirm onchange=IsEqual(this,this.form.password,1) />

IsRequired() simply checks for the presence of some content in a required field and accepts a single parameter which is a reference to the control to be evaluated:

<INPUT name=user onchange=IsRequired(this) />

IsSelected() checks that an option other the first or prompt option in select menu control has been selected and and accepts a single parameter which is a reference to the control to be evaluated:

<SELECT name=options onchange=IsSelected(this)>
    <OPTION value="">Choose One
    <OPTION value="1">One
    <OPTION value="2">Two
</SELECT>

While this is useful to supply a dummy prompt to make sure that a user selects something other than an initial default option (i.e. an usual number of folks can end up living in Alabama) this should obviously not be used used where the first option is in fact a valid selection.

Final Validation (onsubmit)

Final validation is accomplished by a function named Validate() which is called as the return value of an onsubmit event handler.

<FORM action=example.html onsubmit="return Validate(this)">

If the results of Validate() are true (no errors) (or if the visitor is using a primitive or non-JavaScript enabled browser) the form is submitted to the processing-agent specified in the action attribute. If it returns false (errors), it flashes a single alert and generates inline DOM error messages for each error field.

The contents of Validate() need to be customized for the specific elements in the form with which you are working. Note that the parameter "f" is a reference to the form containing the controls to be validated:

function Validate(f) {
	var errors=0;
	errors+=IsRequired(f.username);
	errors+=IsEmail(f.email,1);
	errors+=IsSecure(f.password,1);
	errors+=IsEqual(f.confirm,f.password,1);
	if(errors) alert(warning);
	return ((errors)? false : true);
	}

To customize Validate() simply add (or remove) a line, using the basic syntax below for each control to be validated:

error+=validator(f.control-name[,any additional arguments])

A sample version of Validate() is included in the .js source file (validate.js), but is better deployed in the head of the document containing the form as it can thereby be customized for different pages using a common source file.

Note that if you want to validate more than one than one form in a page, you can create a clone of Validate() and rename it something clever like Validate_1() or, e.g.

<script type="text/javascript">
function Validate_1(f) {
    [statements]
 	}

function Validate_2(f) {
    [statements]
 	} 	
</script>

<FORM action=example.html onsubmit="return Validate_1(this)">
[controls]
</FORM>

<FORM action=example.html onsubmit="return Validate_2(this)">
[controls]
</FORM>

Although note that, while the individual fields in each form can be validated with onchange event handlers, only one form can actually be fully validated and submitted at a time.

Inline Layout

The form in the example above is layed out using a three column table each row of which looks something like the following minimized example:

<td>Username</td><td><input name="user"></td><td id="user_w"> </td>

Developers can use other layouts. The important thing, however, is that the node, in this case a table cell (td), that receives any error messages associated with a field is assigned an ID string attribute which is created by appending "_w" to the value assigned to the field's NAME attribute.

<div><input name="user"></div><div id="user_w"> </div>

If you're the sort who just hates on tables and would prefer to structure a multirow, three-column layout using precise mathematical positioning that will break in every third browser, have at it, Ace. Just make sure the the ID of the node that will enclose any error messages is same string of characters (+ '_w') assigned the NAME attribute of the associated form control.

The CSS

Finally, the nodes enclosing the DOM-generated text warnings toggle between two classes (.warning and .warning_active) which flip the base color of the text and includes at least the minimal statements:

.warning { color:#000; }
.warning_active { color:#900;}

Note that while you are not literally required to assign an initial class to the nodes, it won't hurt if you do.