View Full Version : Form Validation

04-18-2005, 11: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:

<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;
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");
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")

// -->


<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>
<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>


How can I stop this from happening?


04-19-2005, 02:33 AM
Try this:

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

04-19-2005, 03:20 AM
It works! :D

Thank you!

04-19-2005, 04:34 AM
It's better to attach the validation on form onsubmit and not in the submit button's onclick.

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.