1

试图按时（一次）准备好我的最终项目，但在提交表单时我似乎无法让单选按钮组进行验证。我的其他一切都在工作，验证也是马马虎虎，但是，无线电组很固执。我尝试了不同的方法，例如删除变量并直接指向“group1”，但没有任何效果。任何帮助将不胜感激。

    <script type="text/javascript">
    function ValidateContactForm()
    {
    var name = document.ContactForm.Name;
    var email = document.ContactForm.Email;
    var phone = document.ContactForm.areaCode;
    var what = document.ContactForm.Subject;
    var comment = document.ContactForm.Comment;
    var btn = document.ContactForm.group1;

    if (name.value == "")
    {
        window.alert("Please enter your name.");
        name.focus();
        return false;
    }

    if (email.value == "")
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
    if (email.value.indexOf("@", 0) < 0)
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
    if (email.value.indexOf(".", 0) < 0)
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }

    if  (btn.value > 0) {
        window.alert("Please choose method of contact.");
        btn.focus();
        return false;
        }

    if (phone.value == "")
    {
        window.alert("Please enter your telephone number.");
        phone.focus();
        return false;
    }

    if (what.selectedIndex < 1)
    {
        alert("Please tell us how we can help you.");
        what.focus();
        return false;
    }

    if (comment.value == "")
    {
        window.alert("Please provide a detailed description or comment.");
        comment.focus();
    return false;
            }
    }
    function validateFixedLengthNumericField(numericField, len){

    if (len != numericField.value.length){
        numericField.focus();   
        alert('Field must contain exactly '+len+' numbers.');
    }
    }

    function validateNextField(numericField, len, nextField){

    if (len == numericField.value.length){
        nextField.focus();
    }
    }
    </script>

    <form method="post" onSubmit="return ValidateContactForm();" name="ContactForm">
  <div align="center">
      <table border="2">
    <tr>
      <td valign="top"><h3 align="left">Contact Information</h3>
    <p align="left">Name:<br /> <input type="text" size="65" name="Name"></p>
    <p align="left">E-mail Address:<br /><input type="text" size="65" name="Email"></p>
    <p align="left">Telephone:<br /> 
      <div class="Telephone" style="float:left;">
            (<input name="areaCode" id="areaCode"  type="text"  maxlength="3"
                onkeyup="validateNextField(this,3,phonePrefix);" 
                onblur="validateFixedLengthNumericField(this,3);"  
                style="font-size:11px; width:20px;"  title="Area Code" autocomplete="off">) 
            <input name="phonePrefix" id="phonePrefix" type="text" 
                onkeyup="validateNextField(this,3,phoneSuffix);" 
                onblur="validateFixedLengthNumericField(this,3);"  
                style="font-size:11px; width:20px;" maxlength="3"  title="Phone Prefix"  autocomplete="off">-
            <input name="phoneSuffix" id="phoneSuffix" type="text"  maxlength="4" 
                onkeyup="validateNextField(this,3,phoneExtension);" 
                onblur="validateFixedLengthNumericField(this,4);"  
                style="font-size:11px; width:25px;" title="Phone Suffix"  autocomplete="off"></p>
    </div>
      <p align="left">&nbsp;</p>
      <p align="left"><strong>Would you like to sign up for one of our mailings?</strong>  <br />
      </p>
    <div align="left">
      <input type="checkbox" name="option" value="newsletter" />
      Newsletters<br />
      <input type="checkbox" name="option" value="events" />
      Events<br />
      <input type="checkbox" name="option" value="grando" />
      Grand Openings<br />
      <input type="checkbox" name="option" value="coupon" />
      Coupons<br />
      <input type="checkbox" name="option" value="other" />
      Other</div>
    <p align="left"><strong>How do you perfer us to contact you</strong><br />
    </p>
    <div align="left">
      <input type="radio" name="group1" id="r1" value="1" />
      Phone
      <br />
    <input type="radio" name="group1" id="r2" value="2" />
    Email<br />
    <input type="radio" name="group1" id="r3" value="3" />
    Snail Mail
    </div>
    <p align="left">What can we help you with?
      <select type="text" value="" name="Subject">
            <option>  </option>
            <option>Customer Service</option>
            <option>Question</option>
            <option>Comment</option>
            <option>Complaint</option>
            <option>Other</option>
    </select></p>
    <p align="left">Comments:</p>
    <p align="center">
      <textarea cols="55" rows="10" name="Comment"></textarea>
    </p>
    <p align="center"><input type="submit" value="Send" name="submit"><input type="reset"      value="Reset" name="reset">    
      </form>
4

1 回答 1

1

在您的情况下，变量 btn 包含一组单选按钮。因此，您需要遍历它并找到检查了哪一个。就像是：

var somethingChecked = false;
for (i = 0; i < btn.length; i++) {
    if (btn[i].checked) {
        somethingChecked = true;
    }
}
if (!somethingChecked) {
    window.alert("Please choose method of contact.");
    return false;
}
于 2013-03-08T18:03:57.517 回答