Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Validation using Object-Oriented Patterns

Validation

Validation using Object-Oriented Patterns

by  Glowball  Posted    (Edited  )
This external Javascript (.js) file can be used as one form validator for an entire site. To use it correctly you should follow these rules:

1. For good error messages, name your form fields descriptive names, with an underscore (_) where a space would go. "First_Name" is a good example.

2. Create a folder off of root named "scripts" to house all of your external Javascript files, including this one.

3. For form fields that you want validated, use the parameter VALIDATOR. This must be in all capital letters! More details will follow.

4. Use the patterns provided or supply your own. VALIDATOR="notEmptyPat" will simply check for any value at all. The others will match patterns in the user's entry for that field.

---------------------------------------
YOUR FILE
---------------------------------------
Code: 
<html>
<head>
<script language="JavaScript" src="/scripts/validate.js" type="text/javascript"></script>
</head>
<body>

<form name="myForm" id="myForm" onSubmit="return validate(myForm)">
Name: <input type=text name="Name"
[color red]
Code: 
VALIDATOR="notEmptyPat"
[/color]
Code: 
><br>
Email Address: <input type=text name="Email_Address"
[color red]
Code: 
VALIDATOR="emailPat"
[/color]
Code: 
><br>
<input type=submit value="Submit">
</form>

</body>
</html>
---------------------------------------
EXTERNAL JAVASCRIPT FILE (validate.js)
---------------------------------------
Code: 
function replace(haystack, oldNeedle, newNeedle) {
	i = haystack.indexOf(oldNeedle);
	r = "";
	if (i == -1) return haystack;
	r += haystack.substring(0,i) + newNeedle;
	if (i + oldNeedle.length < haystack.length)
		r += replace(haystack.substring(i + oldNeedle.length, haystack.length), oldNeedle, newNeedle);
	return r;
	}

function validate(objForm) {
	var PatternsDict = new Object();
	PatternsDict.zipPat = /\d{5}(-\d{4})?/;  // matches zip codes
	PatternsDict.
[color blue]
Code: 
emailPat
[/color]
Code: 
 = /.*@.*\..*/;  // matches email addresses
	PatternsDict.
[color blue]
Code: 
notEmptyPat
[/color]
Code: 
 = /.{1,}/;  // matches at least one character
	PatternsDict.numberPat = /\d/;  // matches numbers only
	PatternsDict.pwPat = /^\D{1}\S{3,9}$/;  // matches between 4 and 10 characters with non-digit leading
	PatternsDict.currencyPat = /\$\d{1,3}(,\d{3})*\.\d{2}/;  // matches currency with commas
	PatternsDict.timePat = /^([1-9]|1[0-2]):[0-5]\d$/;  // matches times

	var elArr = objForm.elements;
	for(var i=0; i<elArr.length; i++)
	with(elArr[i]) { 
		var v = elArr[i].VALIDATOR; 
		if(!v) continue; 
		
		var thePat = PatternsDict[v]; 
		var gotIt = thePat.exec(value); 
		if(!gotIt) {
			var returnStr;
			readName = replace(name, "_", " ");
			returnStr = "The " + readName + " field is invalid, this field is required in order to submit this form.  Please try again!";
			alert(returnStr);
			return false;
			}
		} 
	return true;
	}
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top