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!

Another Regular Expression Based Validation

Validation

Another Regular Expression Based Validation

by  Tarwn  Posted    (Edited  )
I wrote this in response to a thread in one of the other forums and felt I would clean it up and post it here. Basically the way this works is that for any input that you would like validated you simply specify a pattern that the value should match against and an option error message that should be displayd should the input not pass validation. Currently this only handles text inputs, but could be easily extended for other cases as well:
Code: 
<html>
<head>
<script language="Javascript">
	//verify function to verify all inputs with a set pattern
	function verify(frmElem){
		var regex, pattern, errmsg;
		var result;
		
		//loop through all form elements
		for(var i = 0;i < frmElem.length;i++){
			
			//try to grab the pattern
			pattern = frmElem.elements(i).testcode;
			
			//make sure there was a pattern
			if(!(pattern===undefined)){
				
				//create a regexp object with the specified pattern
				regex = new RegExp(frmElem.elements(i).testcode,"i");
				
				//test the value with the supplied pattern
	

				if(!(regex.test(frmElem.elements(i).value))){
					//oops, incorrect entry, get the error message
					errmsg = frmElem.elements(i).testerror;

					//if there wasn't one, make one up
					if(errmsg===undefined){
						errmsg = "Please double check the selected entry, it is incorrectly formated."
					}

					//do a std error reaction
					alert(errmsg);
					frmElem.elements(i).focus();
					return false;
				}
			}
		}
		return true;
	}
</script>
</head>
<body>

<!-- Some sample code -->

<form method="POST" action="sample.asp" onSubmit="return verify(this);">

Enter a Number: <input type="text" name="txtNum" testcode="^\d$" testerror="You may only enter a single number in the first input.">*<br>

Enter a Letter: <input type="text" name="txtLetter" testcode="^[a-zA-Z]$" testerror="You may only enter a single letter in the second input.">*<br>

Enter whatever you want: <input type="text" name="txtAnything"><br>

Enter a Phone Number: <input type="text" name="txtPhone" testcode="^\d{3}-\d{3}-\d{4}$" testerror="Please check that your phone number is in the correct format (###-###-####).">*<br>

Enter an Email: <input type="text" name="txtEmail" testcode="^[\w-_\.]+\@[\w-_]+(\.[\w-_]+)+$" testerror="Please check that your email is formatted correctly.">*<br>

<input type="submit" value="Submit">
</form>
</body>
</html>

Basically what happens is that the script loops through all of the form elements in the form you wish to verify. With each element it attempts to get the testcode (pattern) you wish to use for validation. If the pattern exists than the script will test the value of the input to make sure it matches the pattern. Should it not match the script then attempts to get a specified error message from that input, falling back on a generic error message should one not be available.

The script itself is relatively short, but from messing with it a litle more I can see how it could be easily extended with a switch statement on the input type in order to test for differant conditions based on the type of input that is to be checked.
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