I’ve been developing my first website, and I’m having issues with a javascript validation script. My code:
<html>
<head>
<title>Territory</title>
</head>
<body>
<script type="text/javascript"> //Main Javascript function giving me issues
function validate(form)
{
fail = validateTerrNum(document.checkOut.numberOut.value);
fail += validateFirstName(document.checkOut.fName.value);
fail += validateLastName(document.checkOut.lName.value);
if (fail == "")
return true;
else
{
alert(fail);
return false;
}
}
</script>
<script type="text/javascript>
function validateTerrNumber(field)
{
if (field == "") return "No territory number was entered. \n";
else if (field.length > 3)
return "Territory numbers must be less than four characters. \n";
else if (/[^0-9]/.test(field))
return "Only 0-9 allowed in territory number. \n";
return "";
}
//Note: Does not sanitize string
function validateFirstName(field)
{
if (field == "") return "No first name was entered. \n";
return "";
}
//Again, note that this function does not sanitize string
function validateLastName(field)
{
if (field == "") return "Not last name was entered. \n";
return "";
}
</script>
<table border="0" cellpadding="2" cellspacing="5">
<th colspan="2" align="center">Check Out</th>
<form name="checkOut" method="post" onSubmit="validate(this)">
<tr><td>Territory Number</td><td><input type="text" name="numberOut" tabindex="1" maxlength="3" size="3" /></td>
</tr><tr><td>First Name of Holder</td><td><input type="text" name="fName" tabindex="2" maxlength="15"/></td>
</tr><tr><td>Last Name of Holder</td><td><input type="text" name="lName" tabindex="3" maxlength="15" /></td>
</tr><tr><td><input type ="checkbox" name="specialC" tabindex="4" value="Yes"/> Special Campaign</td>
</tr><tr><td></td><td><input type="submit" value="Check Out" /></td>
</form>
</table>
</body>
</html>
It is obviously poorly formatted – result of copy and paste. To be more specific, this issue is with the javascript validation. When I hit “Check Out,” the validation does not prevent it when I put in bad values. The script is quite simple, but for some reason I can’t figure out what is going on with it (I’m fairly new to javascript).
I know the issue is not my browser as I have many javascripts running throughout it. The only thing I can think of is that the form does not have a method. It will be another validation, but written in php – the javascript is really just a prevalidation for the client.
Any help would be appreciated.
-Mlagma
To stop the submit going ahead after validation fails you need:
instead of your current code:
Your
validate()function already returnstrueorfalse, but those values were not being returned from the event handler itself. If you think of the code between the quotes ofonSubmit=""as the body of a function this makes sense.And, asTeemu pointed out, your
validate()function tries to invoke a function calledvalidateTerrNumwhen actually you’ve declared that function asvalidateTerrNumber.With these problems corrected you can see it working here: http://jsfiddle.net/nnnnnn/Wvcy3/