Form Validator

SCRIPT INCLUDES

The validation .js file must be included in the head of your page, you can link to it simply by including a line like such
<script type="text/javascript" language="JavaScript" src="formvalidator.js"></script>

Grab the script here, and then use this html file as your resource for implementation.

USER SETTINGS

The user settings at the top of the javascript file allow you to customize certain portions of the script. Let's run through what each setting will achieve:

errorClass
This lets you choose the class name that will be used when the script creates the span tag to encapsulate the error. Use this to let you apply a class you already currently have residing in your stylesheet, or to let you set up a new one.

dropdownDefault
Use this varialbe to determine what the default value is for a drop down, this is useful in cases where you want to make a drop down menu required, the script will use this value to determine which value is the default and then use this to check the currently selected value against.

dropdownOther
This is similar ot drop down default except that it is setting the default value for the drop down item which allows for an entry of "other". So if a user is select other from a drop down menu or a radio button group this value will ensure that the associated text box is completed.

alternate
This setting allows for different methods of error reporting. Currently the default of blank will display messages using the span creation method, however you may set this value to 1 and it will change from span to drawing a single pixel red border around the invalid form element (for textboxes only).

alterrorField
Allows you to set a class to be used in alternate 1 setting, for field and select elements only.

alterrorGroup
Allows you to set a class to be used in alternate 1 setting, for checkbox and radio button elements only. This class actually gets applied to the first label within the group and not the element directly. The reason behind this is twofold, a) firefox will have a hard time display any border styles and b) the error is actually for the entire group and not on a single element.

cbradioClass
If you are using a seperate class for radio buttons and check boxes, for instance to ensure that borders do not appear around them in IE, then please enter it here, otherwise you will notice any overriding input style taking over your radio/check boxes in terms of border style used.

FORM ATTRIBUTES

onsubmit
This must be set in order to activate the form, a simple onsubmit="return validateFields(this);" can be used which well then validate all properly marked fields within the enclosed form

FORM STRUCTURE

The structure of the form code itself is essential to the script performing as it was intended. The example form details the proper layout for a form, which uses a series of properly attributed label tags and proceeding elements. The structure of these tags are essential as well to ensure proper function. You can easily uses CSS to repositon or stylize the form, which is keeping with W3C standards spec. Here are the form tags and the attribute formatting that is required by them:

One other important note, you can wrap group elements such as radio buttons and check boxes, inside a container div to change the way the error message will display. The only requirement of the container div is that it uses the name property of the elements within with the text 'group' appened to the end, so if the group name was 'feed', the div id would be 'feedgroup'. This will then force the span that is created to be placed at the end of the group of elements.

LABEL

You should always have a for="XX" attributre for a label tag that uses the id value of the input item it preceeds to replace the XX. The other attribute to note here is the id="". This MUST follow the following structure in order to sucessfully display error messages:

What this does is take the regular id of the input item and preceeds it with the word 'for'. This allows for the display of error messages inline with the page, essentially the javascript creates a span element within the label element. If you take a look at the sample CSS provided in the eample form you will not that the label tags all have position:relative set. This is a great help when you start styling your form and want to modify the position of the span tags that are created within each label.

FORM ELEMENTS

title
The validation system uses the title attribute of a form item in order to perform validation. Using this known attribute allows the dowm to validate as XHTML 1.0 Transitional. Below are the values that can be set and their resulting impact. This is the only use for this attribute with the exception of the select element, which uses this attribute to define the validation type and to allow placement of an error message which I will get into shortly. It is also important to note that you may mix title fields, so if you want to valid for instance a postal field AND have it be a required field, you must use an attribute like title="postal,required" (order is unimportant). This does not apply to select elements, radio button groups or checkboxes as they do not require any validation of content and so are only required or not required. Here are the possible validation types:

title="required"
This marks the field as being a required element, this field accepts any type of input as long as there is atleast one character. When using this for a select menu you may want to include an error message within the title attribute since the alt attribute does not exist for select elements. This can be achieved by using the following syntax title="required|Please Select an item". Just be careful when entering an error message that your message does not contain any of the words you would use as a validation call, ie: postal, email, etc...

title="postal"
This checks the field has a properly formatted north american postal address, ie: 90210 or 1A1 A1A. You can modify the values it allows by changing the regular expression within the checkPostal function inside the js file. You can also pass a country code if you wish to change the validation type, currently it supports passing UK only by using the following syntax title="postal(UK)".

title="email"
This performs a check that the field is a properly formatted email address. Thast means a string followed by the @ symbol followed by a string, a . and then atleast 2 characters

title="phone"
This performs a check to ensure the string uses a properly formatted north american phone number, ie: (XXX) XXX-XXXX. Again if you wish to modify this you may change the regular expression with the validate_phone function. You can also pass a country code if you wish to change the validation type, currently it supports passing UK only by using the following syntax title="phone(UK)".

title="group"
This is useful for groups of radio buttons or even checkboxes where atleast one item must be selected. This means that adding this validation to a group of items will automatically make them required. Also note that the title attribute must be applied to ALL group items, not just one. It is useful to note however that you only need to place the alt attribute in the first item in the collection.

title="match_X"
This validation will ensure that two fields contain matching values. You would denote the two fields you wish to match by replacing the x with an appropriate letter or number, as long as they match on both fields. SO for instance you could have two match_a's and two match_b's on one page that would allow for multiple match tests.

alt

The alt attribute will house the error message you wish to appear when the validation for that particular field fails. There are no rules for content used here.

onkeydown

This is used if you wish to restrict the content entered into a field. It's not so much submission validation, but more restricting content before you even have to validate it. Currently there are two options you can use here:

onkeydown="return numeric(event)"
This will allow only numeric characters to be entered into a field, the back space and the tab key, all others are blocked

onkeydown="return alpha(event)"
This will allow only alphabetic characters to be entered into a field, the back space and the tab key, all numbers are blocked