Need help with form validation

[ajohnson]

I have a form on my website that when filled out, goes directly into my database. I am trying to find a way to validate the fields prior to submission, and it worked, but does not abort the submission if it returns false. I'm sure its something stupid, but i need help.

<script type="text/javascript"><!--
function validateForm() {
if (document.bntform.name_1.value=="") {
alert("You did not fill our your first name.");
return false;
}
if (document.bntform.name_2.value=="") {
alert("You did not fill our your last name.");
return false;
}
if (document.bntform.street_1.value=="") {
alert("You did not fill our your street address.");
return false;
}
if (document.bntform.city.value=="") {
alert("You did not fill our your city.");
return false;
}
if (document.bntform.state.value=="") {
alert("You did not fill our your state.");
return false;
}
if (document.bntform.zip.value=="") {
alert("You did not fill our your zip code.");
return false;
}
if (document.bntform.phone_h.value=="") {
alert("You did not fill our your home phone.");
return false;
}
if (document.bntform.email.value=="") {
alert("You did not fill our your email address.");
return false;
}else {return true; }
}
//-->
</script>
<form name="bntform" id="bntWebForm" action="https://www.example.net/account4/webform/" accept-charset="UNKNOWN" enctype="application/x-www-form-urlencoded" method="post">
<span style="color: #ff0000;">Fields marked <strong>*</strong> are required</span>
<table style="width: 666px; height: 556px;" border="0" cellspacing="2" cellpadding="2" width="666">
<tbody>
<tr>
<td class="f_name"><strong>First Name</strong> <span style="color: #ff0000;"><strong>*</strong></span></td>
<td class="f_input"><input maxlength="2147483647" name="name_1" size="20" type="text" /></td>
</tr>
<tr>
<td class="f_name"><strong>Last Name</strong> <span style="color: #ff0000;"><strong>*</strong></span></td>
<td class="f_input"><input maxlength="2147483647" name="name_2" size="20" type="text" /></td>
</tr>
<tr>
<td class="f_name"><strong>Address: Street (1)</strong> <span style="color: #ff0000;"><strong>*</strong></span></td>
<td class="f_input"><input maxlength="2147483647" name="street_1" size="38" type="text" /></td>
</tr>
<tr>
<td class="f_name"><strong>Address: Street (2)</strong></td>
<td class="f_input"><input maxlength="2147483647" name="street_2" size="38" type="text" /></td>
</tr>
<tr>
<td class="f_name"><strong>Address: City</strong> <span style="color: #ff0000;"><strong>*</strong></span></td>
<td class="f_input"><input maxlength="2147483647" name="city" size="20" type="text" /></td>
</tr>
<tr>
<td class="f_name"><strong>Address: State</strong> <span style="color: #ff0000;"><strong>*</strong></span></td>
<td class="f_input"><input maxlength="2147483647" name="state" size="20" type="text" /></td>
</tr>
<tr>
<td class="f_name"><strong>Address: Zip</strong> <span style="color: #ff0000;"><strong>*</strong></span></td>
<td class="f_input"><input maxlength="2147483647" name="zip" size="10" type="text" /></td>
</tr>
<tr>
<td class="f_name"><strong>Home Phone</strong> <span style="color: #ff0000;"><strong>*</strong></span></td>
<td class="f_input"><input maxlength="2147483647" name="phone_h" size="15" type="text" /></td>
</tr>
<tr>
<td class="f_name"><strong>Cell Phone</strong></td>
<td class="f_input"><input maxlength="2147483647" name="phone_cell" size="15" type="text" /></td>
</tr>
<tr>
<td class="f_name"><strong>Work Phone</strong></td>
<td class="f_input"><input maxlength="2147483647" name="phone_w" size="15" type="text" /></td>
</tr>
<tr>
<td class="f_name"><strong>Email</strong> <span style="color: #ff0000;"><strong>*</strong></span></td>
<td class="f_input"><input maxlength="2147483647" name="email" size="30" type="text" /></td>
</tr>
<tr>
<td class="f_name"><strong>When to contact you?</strong></td>
<td class="f_input"><input maxlength="2147483647" name="1040615" size="38" type="text" /></td>
</tr>
<tr>
<td class="f_name"><strong>Additional Notes</strong></td>
<td class="f_input"><input maxlength="2147483647" name="1040608" size="38" type="text" /></td>
</tr>
<tr>
<td> </td>
<td><input onClick="validateForm()" maxlength="2147483647" size="20" type="submit" value="Submit" /></td>
</tr>
</tbody></table>
<input maxlength="2147483647" name="RETURNURL" size="20" type="hidden" value="http://www.example.com" /> <input maxlength="2147483647" name="USERID" size="20" type="hidden" value="3153" /> <input maxlength="2147483647" name="GROUPID" size="20" type="hidden" value="7" /> <input maxlength="2147483647" name="SEQUENCEID" size="20" type="hidden" value="1" /> <input maxlength="2147483647" name="WEBFORMID" size="20" type="hidden" value="1545" /> <input maxlength="2147483647" name="PROCESSTYPE" size="20" type="hidden" value="mortgage" />
</form>

[edited by: jatar_k at 10:27 pm (utc) on June 27, 2008]
[edit reason] removed urls [/edit]

[rocknbil]

Let's combine the principles in your other thread [webmasterworld.com] for a final solution.

First, you will notice I have added the ID field to your form elements. This allows you to 1) use document.getElementById in your Javascript instead of referencing by name, and b) properly use labels in your form. Since you now have ID's, you can use labels which only reference relevant form elements by ID. ID's can be the same value as the name attribute, but must be unique (no two elements with same ID.)

The label is useful for many accessibility and semantic reasons. (Google it, there are many.)

Next, the value attribute is handy, if you dabble in the server side stuff it will be useful for re-populating forms with values. So I've added value="" on all form elements.

It's a bad habit to name a form object a number. Javascript requires that all variables start with a plain character, not a number. Note I've added a "c" before your numeric form names.

See previous post about putting the onSubmit in the form, not on the button.

Size and maxlength attributes are not needed on hidden values.

So what we do is make a list of requireds, a corresponding list of "plain english" messages for the required list, and "loop" through the list looking for blank fields. Line by line comments follow.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<!--  
Put doctype all on one line. 
There is no need for an XHTML doctype here. 
--> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Validate</title> 
<script type="text/javascript"> 
 //Accept the form object as a function parameter 
 function validateForm(form) { 
  // Set the msg value to blank. If an error is found, this will 
// be the trigger to do the alert. 
    var msg = ''; 
  // Store your required fields as an array (list) 
    var requireds = new Array('name_1','name_2','street_1','city','state','zip','phone_h','email'); 
// Create a list of values that correspond with the requires for user-frinedly messages 
    var english = new Array('first name', 'last name', 'street address', 'city', 'state', 
'zip code', 'home phone', 'email address'); 
// Loop through the list. Compile a full list of missing values. 
    for (i=0;i<requireds.length;i++) { 
  // See if it's blank. If you have fields other than plain text 
  // fields, a different approach is required. 
  if (document.getElementById(requireds[i]).value == '') { 
   msg += "The " + english[i] + " field is required.\n"; 
  } 
  } 
  // If the message is not blank, alert, otherwise, submit. 
  if (msg != '') { alert(msg); } 
    else { form.submit(); } 
    return false; 
 } 
</script> 
</head> 
<body> 
<form name="bntform" id="bntWebForm" action="https://www.example.net/account4/webform/"  
accept-charset="UNKNOWN" enctype="application/x-www-form-urlencoded" method="post" 
onSubmit="return validateForm(this);"> 
<span style="color: #ff0000;">Fields marked <strong>*</strong> are required</span> 
<table style="width: 666px; height: 556px;" border="0" 
cellspacing="2" cellpadding="2" width="666"> 
<tbody> 
<tr> 
<td class="f_name"> 
 <label for="name_1">First Name</label> <span style="color: #ff0000;"><strong>*</strong></span> 
</td> 
<td class="f_input"> 
 <input maxlength="256" name="name_1" id="name_1" size="20" type="text" value=""> 
</td> 
</tr> 
<tr> 
<td class="f_name"> 
 <label for="name_2">Last Name</label> <span style="color: #ff0000;"><strong>*</strong></span> 
</td> 
<td class="f_input"> 
 <input maxlength="256" name="name_2" id="name_2" size="20" type="text" value=""> 
</td> 
</tr> 
<tr> 
<td class="f_name"> 
 <label for="street_1">Address: Street (1)</label> 
 <span style="color: #ff0000;"><strong>*</strong></span> 
</td> 
<td class="f_input"> 
<input maxlength="256" name="street_1" id="street_1" size="38" type="text" value=""> 
</td> 
</tr> 
<tr> 
<td class="f_name"> 
 <label for="street_2">Address: Street (2)</label> 
</td> 
<td class="f_input"> 
 <input maxlength="256" name="street_2" id="street_2" size="38" type="text" value=""> 
</td> 
</tr> 
<tr> 
<td class="f_name"> 
 <label for="city">Address: City</label> <span style="color: #ff0000;"><strong>*</strong></span> 
</td> 
<td class="f_input"> 
 <input maxlength="256" name="city" id="city" size="20" type="text" value=""> 
</td> 
</tr> 
<tr> 
<td class="f_name"> 
 <label for="state">Address: State</label> <span style="color: #ff0000;"><strong>*</strong></span> 
</td> 
<td class="f_input"> 
 <input maxlength="256" name="state" id="state" size="20" type="text" value=""> 
</td> 
</tr> 
<tr> 
<td class="f_name"> 
 <label for="zip">Address: Zip</label> <span style="color: #ff0000;"><strong>*</strong></span> 
</td> 
<td class="f_input"> 
 <input maxlength="256" name="zip" id="zip" size="10" type="text" value=""> 
</td> 
</tr> 
<tr> 
<td class="f_name"> 
 <label for="phone_h">Home Phone</label> <span style="color: #ff0000;"><strong>*</strong></span> 
</td> 
<td class="f_input"> 
 <input maxlength="256" name="phone_h" id="phone_h" size="15" type="text" value=""> 
</td> 
</tr> 
<tr> 
<td class="f_name"> 
 <label for="phone_cell">Cell Phone</label> 
</td> 
<td class="f_input"> 
 <input maxlength="256" name="phone_cell" id="phone_cell" size="15" type="text" value=""> 
</td> 
</tr> 
<tr> 
<td class="f_name"> 
 <label for="phone_w">Work Phone</label></td> 
<td class="f_input"> 
 <input maxlength="256" name="phone_w" id="phone_w" size="15" type="text" value=""> 
</td> 
</tr> 
<tr> 
<td class="f_name"> 
 <label for="email">Email</label> <span style="color: #ff0000;"><strong>*</strong></span> 
</td> 
<td class="f_input"> 
 <input maxlength="256" name="email" id="email" size="30" type="text" value=""> 
</td> 
</tr> 
<tr> 
<td class="f_name"> 
 <label for="c1040615">When to contact you?</label> 
</td> 
<td class="f_input"> 
 <input maxlength="256" name="c1040615" id="c1040615" size="38" type="text" value=""> 
</td> 
</tr> 
<tr> 
<td class="f_name"> 
 <label for="c1040608">Additional Notes</label> 
</td> 
<td class="f_input"> 
 <input maxlength="256" name="c1040608" id="c1040608" size="38" type="text" value=""> 
</td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
<td><input type="submit" id="submitButton" value="Submit"></td> 
</tr> 
</tbody></table> 
<input name="RETURNURL" type="hidden" value="http://www.example.com"> 
<input name="USERID" type="hidden" value="3153"> 
<input name="GROUPID" type="hidden" value="7"> 
<input name="SEQUENCEID" type="hidden" value="1"> 
<input name="WEBFORMID" type="hidden" value="1545"> 
<input name="PROCESSTYPE" type="hidden" value="mortgage"> 
</form>  
</body> 
</html> 

[webfoo]

Also, it's not a good idea to rely ONLY on javascript for form validation. You'd want to have your server-side script validate it also. Because people can disable javascript, they can write their own form without javasscript, etc.

[ajohnson]

Thanks for the help. You guys are awesome!

[ajohnson]

.