Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Form Validation

  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Location
    Calgary, AB
    Posts
    179
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Form Validation

    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!

  • #2
    New Coder
    Join Date
    Mar 2005
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this:

    <input type="submit" value="Register" onclick="return validate();">
    "It doesn't matter if I'm optomistic or not, nothing ever works out for me."

  • #3
    Regular Coder
    Join Date
    Sep 2002
    Location
    Calgary, AB
    Posts
    179
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It works!

    Thank you!

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •