必须复选框才能提交表单

时间:2012-05-04 14:23:09

标签: javascript forms validation

尝试创建一个表单,强制用户选中带有短语“我接受条款和条件”的复选框,以便发送表单。

这就是我所拥有的,但它没有提交表格 - 我收到了错误。

我放在标题中的Javascript:

<script type="text/javascript">
   <!--

   function validate_form ( )
   {
   valid = true;

   if ( document.form1.cb.checked == false )
   {
   alert ( "Please check the Terms & Conditions box ." );
   valid = false;
   }

   return valid;
   }

   //-->
   </script>

形式:

    <form action="/cgi-bin/FormMail.pl" method="POST" name="frmOne"  id="frmOne">
    <input type=hidden name="recipient" value="XXX@XXX.com"/>
    <table width="100%" cellspacing="5" cellpadding="5" style="margin-top:-20px">
    <tr>
    <td width="50%" valign="top">
    <br/>
      <p><span id="sprytextfield1">
    <label for="Full Name">Full Name (First and Last): </label>
    <input name="Full Name" type="text" id="name" tabindex="10" size="60" />
    <span class="textfieldRequiredMsg"><br />Please provide information.</span></span> </p>
    <p><span id="sprytextfield2">
    <label for="Your Email">Your e-mail address: </label>
    <input name="email" type="text" id="email" size="60" />
    <span class="textfieldInvalidFormatMsg"></span></span>  </p>
    <p><span id="sprytextfield3">
    <label for="Phone Number"> Phone Number: </label>
    <input name="Phone Number" type="text" id="phone" size="60" />
    <span class="textfieldInvalidFormatMsg"><br />Invalid format.</span><span class="textfieldRequiredMsg"><br/>A phone number is required.</span></span></p>
    <p class="text">
      <span id="sprytextfield4">
    <label for="Nature Of The Accident">Nature of Accident, i.e. slip and fall, motor vehicle accident, etc.:  </label>
    <input name="Nature Of The Accident" type="text" id="natureOfAccident" size="60" />
    </span></p>
    <p><span id="sprytextfield5">
    <label for="Date Of The Accident">Date of the Accident: </label>
    <input name="Date Of The Accident" type="text" id="dateOfAccident" size="60" />
    <span class="textfieldRequiredMsg"><br />Please provide information.</span><span class="textfieldInvalidFormatMsg"><br />Invalid format.</span></span></p>
    <p class="text">
    </td>

    <td width="50%" valign="top">

    <p class="text">
    <span id="sprytextarea1"> 
    <label for="Description Of The Injury"><br />Brief Description of your Injuries: </label>
    <textarea name="Description Of The Injury" cols="45" rows="4" id="descriptionOfInjury">
    </textarea> 
    <span class="textareaRequiredMsg"><br />Please provide information.</span></span></p>
    <p class="text">
    <span id="sprytextarea2">
    <label for="Description Of The Accident">Brief Description of the Accident:</label>
    <textarea name="Description Of The Accident" id="descriptionOfAccident" cols="45" rows="4"></textarea>
    <span class="textareaRequiredMsg"><br />
    Please provide information.</span></span></p>
    <p class="text">
    <span id="sprytextfield6">
    <label for="How Did You Hear About Us">How did you hear about us?: </label>
    <input name="How Did You Hear About Us" type="text" id="howDidYouHear" size="56" />
    <span class="textfieldRequiredMsg"><br />Please provide information.</span></span>  </p>
    <input type="checkbox" name="agree" value="agree_terms" id="disclaimer" />
    <label for="disclaimer">I have read the Disclaimer</label>
    <br/><br />
    &nbsp;<input type="reset" name="reset" id="reset" value="Reset Form" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="submit" name="Form Action" id="send" tabindex="100" value="Submit" />

    </td>
    </tr>
    </table>

</form>
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur", "change"]});
var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "email", {validateOn:["blur", "change"], isRequired:false});
var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "phone_number", {validateOn:["blur"], useCharacterMasking:true});
var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "none", {isRequired:false, validateOn:["blur", "change"]});
var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5", "date", {hint:"dd/mm/yyyy", validateOn:["blur", "change"], format:"dd/mm/yyyy"});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1", {validateOn:["blur", "change"]});
var sprytextarea2 = new Spry.Widget.ValidationTextarea("sprytextarea2", {validateOn:["blur", "change"]});
var sprytextfield6 = new Spry.Widget.ValidationTextField("sprytextfield6", "none", {validateOn:["blur", "change"], hint:"Google, etc"});
//-->
</script></div>

3 个答案:

答案 0 :(得分:1)

您正在引用表单和元素错误,请尝试以下操作:

<form name="frmOne" method="POST" onSubmit="return checkForm(frmOne);" action="/cgi-bin/FormMail.pl">

<script>
function checkForm(form) 
{
    if(!form.agree.checked) 
    { 
        alert("You must agree to this disclaimer before applying.");
        return false;
    }
}
</script>

我希望帮助

答案 1 :(得分:0)

<form action="/cgi-bin/FormMail.pl" method="POST" name="frmOne" id="frmOne">更改为<form action="/cgi-bin/FormMail.pl" method="POST" name="frmOne" id="frmOne" onSubmit="validate_form();">

你还有其他什么错误?

并将document.form1.cb.checked更改为document.frmOne.agree.checked

答案 2 :(得分:0)

试试document.getElementById("disclaimer").checked == false