This question already has an answer here:
I have a form that has required fields.
I am validating it with Javascript.
However, it does not seem to recognize the checkbox field and allows the form to be submitted anyway without requiring that checkbox to be checked.
How do I get it to require the checkbox field also?
Here is my HTML.
<script type="text/javascript" src="required_fields.js"></script>
<form action="mail.php" method="post" onsubmit="
if(submitting) {
alert('The form is being submitted, please wait a moment...');
myButton.disabled = true;
return false;
}
if(checkForm(this)) {
myButton.value = 'Submitting form...';
submitting = true;
return true;
}
return false;
">
<table border="0" cellspacing="2" cellpadding="2">
<tr>
<td><strong>Company Name:</strong></td>
<td><label><span style="display: none;">Company Name</span><input type="text" name="companyname" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> First Name:</strong></td>
<td><label><span style="display: none;">First Name</span><input type="text" name="firstname" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Last Name:</strong></td>
<td><label><span style="display: none;">Last Name</span><input type="text" name="lastname" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Street Address:</strong></td>
<td><label><span style="display: none;">Street Address</span><input type="text" name="address1" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong>Suite/Apt:</strong></td>
<td><label><span style="display: none;">Suite/Apt</span><input type="text" name="address2" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> City:</strong></td>
<td><label><span style="display: none;">City</span><input type="text" name="city" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> State:</strong></td>
<td><label><span style="display: none;">State</span><input type="text" name="state" size="2" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Zip:</strong></td>
<td><label><span style="display: none;">Zip</span><input type="text" name="zip" size="4" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Daytime Phone:</strong></td>
<td><label><span style="display: none;">Daytime Phone</span><input type="text" name="dayphone" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Email Address:</strong></td>
<td><label><span style="display: none;">Email Address</span><input type="text" name="email" size="30" /></label></td>
</tr>
<tr>
<td style="text-align: right;"><strong><span style="color: #990000;">*</span> Anti-Spam: </strong></td>
<td><label for="notspam"><span style="display: none;">anti-spam</span></label><input type="checkbox" id="notspam" name="notspam"> check box please</td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="myButton" value="Submit Order" style="background-color: #012e63; color: white;" id="myButton"/></td>
</tr>
</table>
</form>
Here is my Javascript.
var submitting = false;
function checkForm(form)
{
if(form.firstname.value == "") {
alert("Please enter First Name");
form.firstname.focus();
return false;
}
if(form.lastname.value == "") {
alert("Please enter Last Name");
form.lastname.focus();
return false;
}
if(form.address1.value == "") {
alert("Please enter Street Address");
form.address1.focus();
return false;
}
if(form.city.value == "") {
alert("Please enter City");
form.city.focus();
return false;
}
if(form.state.value == "") {
alert("Please enter State");
form.state.focus();
return false;
}
if(form.zip.value == "") {
alert("Please enter Zip");
form.zip.focus();
return false;
}
if(form.dayphone.value == "") {
alert("Please enter Daytime Phone");
form.dayphone.focus();
return false;
}
if(form.email.value == "") {
alert("Please enter Email Address");
form.email.focus();
return false;
}
if(form.notspam.value == "") {
alert("Please check Anti-Spam");
form.notspam.focus();
return false;
}
return true;
}
Aucun commentaire:
Enregistrer un commentaire