Inside Technique : Form Validation Made Easy : Turning On the Validation Checks

To turn on all the different validation checks, you will need to write script which sets properties on the form fields. Listed below are all the properties you have available to you to customize the validation on your pages.

Property	Object	Description	Use
AMOUNT	Element	Turns on the dollar amount check for the field.	oElement.AMOUNT = true;
AND	Element	Sets up a relational validation check. If this field has a non-whitespace value, each field in the list must also have a non-whitespace value. You may provide the list as an array of object references, an array of field names as strings, or as a comma-delimited string of field names.	oElement.AND = asFields; oElement.AND = sFields; oElement.AND = aoFields;
DATE	Element	Turns on the date validation check.	oElement.DATE = true;
EMAIL	Element	The field must contain a valid email address.	oElement.EMAIL = true;
FLOAT	Element	Turns on the floating point check for the field.	oElement.FLOAT = true;
INTEGER	Element	Turns on the integer validation check.	oElement.INTEGER = true;
LOWERCASE	Element	All letters become lowercase.	oElement.LOWERCASE = true;
MAX	Element	Defines the maximum integer value the field may have.	oElement.MAX = iMax;
MIN	Element	Defines the minimum integer value the field may have.	oElement.MIN = iMin;
MSG	Element	Defines an error message which overrides all other validation messages generated from this field.	oElement.MSG = sMessage;
NAME	Element	Defines the display name for a given form element	oElement.NAME = sName;
NOSPACE	Element	All whitespace is removed from the field	oElement.NOSPACE = true;
onaftervalidate	Form	Pseudo-event enabling script to run just after the FORM validates its elements.	oForm.onaftervalidate = function () { ... }
onbeforevalidate	Form	Pseudo-event enabling script to run just before the FORM begins to validate its elements.	oForm.onbeforevalidate = function () { ... }
onvalidate	Element	Pseudo-event which runs directly after all default validation for a given form field. Use this event to trigger validation on SELECT elements.	oElement.onvalidate = function () { ... }
OR	Element	Sets up a relational validation check. The value of the property is an object with two properties: "fields", a list of fields included in the relational check, and "msg", the error message you want to display. If this field does not have a non-whitespace value, at least one field in the list must. You may provide the list as an array of object references, an array of field names as strings, or as a comma-delimited string of field names.	oElement.OR = { "fields":asFields, "msg":sMessage }; oElement.OR = { "fields":sFields, "msg":sMessage }; oElement.OR = { "fields":aoFields, "msg":sMessage };
PHONE	Element	The field must contain a valid US phone number. The check actually calculates the total number of digits. The number must have ten or eleven digits to be valid. If eleven digits, the first digit must be a 1.	oElement.PHONE = true;
REGEXP	Element	Apply a user-defined regular expression validation check.	oElement.REGEXP = oRegex;
REQUIRED	Element	The field must have a non-whitespace value.	oElement.REQUIRED = true;
SIGNED	Element	When used in combination with AMOUNT, FLOAT, or INTEGER, this attribute further allows the user to use a plus (+) or minus (-) sign in the value.	oElement.SIGNED = true;
UPPERCASE	Element	All letters become uppercase.	oElement.UPPERCASE = true;
ZIP	Element	The field must have a valid US ZIP code. Includes the 5+4 variation.	oElement.ZIP = true;

A sample setup script block might look like this:

<script language="JavaScript1.2" type="text/javascript">
with (document.oForm)
{
	radio[0].AND = new Array(fname, lname, city, state);
	fname.OR =
	{
		"fields" : new Array(lname),
		"msg"    : "Please enter your first name, last name or city"
	}
	phone.PHONE = true;
	toolnum.REGEXP = /^\d{7}(-?\d{2})?$/;
	toolnum.MSG = "Please enter a valid tool number";
	zip.ZIP = true;
	qty.INTEGER = true;
	qty.MIN = 8;
	qty.MAX = 256;
}
</script>

Using the with block enables you to keep from writing all the dot notation to access each field name. It is also more efficient, but for such a small script, you might not even notice the difference. While this script is still somewhat complex for a beginner, it is much less complex than writing all the validation for yourself.

Let's take a look at the application of this setup script in the demo form.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.