Form Validation

ragol_67 · 04-18-2005, 10:25 PM

I have a form validator set up, and when the user enters an something incorrect into a field, it comes up with a message saying "you have entered incorrect data", but when the user clicks ok, the browser still takes the user to the next page.

Here is my code:

Code:

  

<html>
<head>
<title>The Modern Eye - Home</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">

<script language="JavaScript">
<!--
	function validate() {		
		at_location = document.form.email.value.indexOf("@")
		dot_location = document.form.email.value.lastIndexOf(".")
		if (at_location == -1 || dot_location == -1 || at_location > dot_location) {
        	alert("Please Enter a Valid Email Address!");
		return false;
		}
		else
			alert("Your Email is Correct!");
		
		
		fname = document.form.fname.value;
   	if (fname.length < 1) {
   		alert("Please Enter a First Name!");
   		return false;
   	}
   	for (j=0; j < fname.length; j++) {
   		if ((fname.charAt(j) > "0") && (fname.charAt(j) < "9")) {
   			alert("Name Cannot Contain Numbers");
   		return false;
   		}
   	}
   	alert("Name is Perfect"); 
   		
   	
   	lname = document.form.lname.value;	
   	if (lname.length < 1) {
   		alert("Please Enter a Last Name!");
   	return false;
   	}
   	for (j=0; j < lname.length; j++) {
   		if ((lname.charAt(j) > "0") && (lname.charAt(j) < "9")) {
   			alert("Name Cannot Contain Numbers");
   		return false;
   		}
   	}
   	alert("Name is Perfect");
   	
   	
   	pass1 = document.form.pass1.value;
		pass2 = document.form.pass2.value;
   	if (pass1 == pass2) {
			alert("Your passwords match");
			}
		else
			alert("Your passwords do not match");
			
		
		ccn = document.form.ccn.value;
		for (j=0; j<ccn.length; j++) {
			if ((ccn.charAt(j) < "0") || (ccn.charAt(j) > "9")) {
				alert("Credit Card must contain only numbers");
			return false
			}
		}
		alert("Credit Card is perfect")
		
	}
// -->
</script>

</head>
	<body>
	
	<center>
	<form method="post" action="register2.asp" class="reg" name="form">
      <table border=1 bgcolor="FFCC00">
      	<tr><td align=left><b>E-mail</b></td><td><input type=text size=40 name=email></td></tr>
	    	<tr><td align=left><b>First Name</b></td><td><input type=text size=40 name=fname></td></tr>
  			<tr><td align=left><b>Last Name</b></td><td><input type=text size=40 name=lname></td></tr>
  			<tr><td colspan=2 align=left>&nbsp;</td></tr>
  			<tr><td align=left><b>Password</b></td><td><input type=password size=40 name=pass1></td></tr>
  			<tr><td align=left><b>Password</b></td><td><input type=password size=40 name=pass2></td></tr>
  			<tr><td colspan=2 align=left>&nbsp;</td></tr>
  			<tr><td align=left><b>Card Number</b></td><td><input type=text size=40 name=ccn></td></tr>
  			<tr><td align=left><b>Card Type</b></td><td><select name=cct size=1>
  				<option selected="selected" value="Choose" label="Choose">Select One</option>
  				<option value="Visa" label="Visa">Visa</option>
  				<option value="AE" label="American Express">American Express</option>
  				<option value="MC" label="Master Card">Master Card</option>
  			</select></td></tr>
  			<tr><td align=left><b>Expiration Date</b></td><td><input type=text size=40 name=cce></td></tr>
  			<tr><td align=center colspan=2><input type="submit" value="Register" onclick="validate()"><input type=reset></td></tr>
	  	</table>
	</form>
	</center>
      

	</body>
</html>

How can I stop this from happening?

Thanks,
Nick!

WMJB · 04-19-2005, 01:33 AM

Try this:

<input type="submit" value="Register" onclick="return validate();">

ragol_67 · 04-19-2005, 02:20 AM

It works!

Thank you!

glenngv · 04-19-2005, 03:34 AM

It's better to attach the validation on form onsubmit and not in the submit button's onclick.

Code:

function validate(oFrm) {		
  var at_location = oFrm.email.value.indexOf("@");
...
<form method="post" action="register2.asp" class="reg" name="form" onsubmit="return validate(this)">

You can also pass the form reference to the function to avoid repeating the form reference document.form. Also it's a good coding habit to always declare variables with var keyword. If declared within a function, it makes the variable local, much more efficient and easier to debug.