jQuery驗證：require_from_group未觸發

Question

在我的表單中，我試圖要求至少需要一個複選框。但是，'require_from_group'函數似乎沒有被調用。

這裏是形式：

<form> 
    <h2>Request your visitor's guide today.</h2> 
    <ol> 
     <li class="first-name textbox row1"> 
      <label for="txtFirstName">First Name</label> 
      <input type="text" id="txtFirstName" name="FirstName"> 
     </li> 
     <li class="last-name textbox row1"> 
      <label for="txtLastName">Last Name</label> 
      <input type="text" id="txtLastName" name="LastName"> 
     </li> 
     <li class="email-address textbox row2"> 
      <label for="txtEmailAddress">Email Address</label> 
      <input type="email" id="txtEmailAddress" name="EmailAddress"> 
     </li> 
     <li class="zip-code textbox row2"> 
      <label for="txtZipCode">ZIP Code</label> 
      <input type="text" id="txtZipCode" maxlength="5" name="ZipCode"> 
     </li> 
     <li class="street-address textbox wide row6"> 
      <label for="txtStreetAddress">Street Address</label> 
      <input type="text" id="txtStreetAddress" name="Address1"> 
     </li> 
     <li class="city textbox row7"> 
      <label for="txtCity">City</label> 
      <input type="text" id="txtCity" name="City"> 
     </li> 
     <li class="state dropdown row7"> 
      <label for="ddlState">State</label> 
      <span></span> 
      <select id="ddlState" name="State"> 
       <option></option> 
      </select> 
     </li> 
     <li class="view-online checkbox row3"> 
      <input type="checkbox" id="chkViewOnline" name="ViewGuideOnline" class="checkbox-required" value="Yes"> 
      <label for="chkViewOnline">View guide online</label> 
     </li> 
     <li class="mail-guide checkbox row3"> 
      <input type="checkbox" id="chkMailGuide" name="MailGuide" class="checkbox-required" value="Yes"> 
      <label for="chkMailGuide">Mail me a printed guide</label> 
     </li> 
     <li class="receive-offers checkbox wide row4"> 
      <input type="checkbox" id="chkReceiveOffers" name="ReceiveOffers"> 
      <label for="chkReceiveOffers">Receive future emails and information</label> 
     </li> 
    </ol> 
    <p class="commands row5"><button type="submit" id="btnSubmit">Submit</button></p> 
</form> 

這裏是我的jQuery：

form.validate({ 
    debug: true, 
    onfocusout: false, 
    rules: { 
     'FirstName': 'required', 
     'LastName': 'required', 
     'EmailAddress': { 
      required: true, 
      email: true 
     }, 
     'ZipCode': { 
      required: true, 
      digits: true 
     }, 
     'Address1': { 
      addressRequired: true 
     }, 
     'City': { 
      addressRequired: true 
     }, 
     'State': { 
      addressRequired: true 
     }, 
     'ViewGuideOnline': { 
      require_from_group: [1, '.checkbox-required'] 
     }, 
     'MailGuide': { 
      require_from_group: [1, '.checkbox-required'] 
     } 
    }, 

    groups : { 
     guides: 'ViewGuideOnline MailGuide' 
    }, 

    errorPlacement: function (error, e) { 
     if (e.attr('name') == 'ViewGuideOnline' || e.attr('name') == 'MailGuide') { 
      error.insertAfter(mailGuide); 
     } else { 
      error.insertAfter(e); 
     } 
    }, 

    highlight: function (e, errorClass, validClass) { 
     $(e).parent('li').addClass(errorClass).removeClass(validClass); 
    }, 

    unhighlight: function (e, errorClass, validClass) { 
     $(e).parent('li').removeClass(errorClass).addClass(validClass); 
    }, 

    submitHandler: function (form) { 
     form.submit(); 
    } 
}); 

jQuery.validator.addMethod('addressRequired', function (value, e) { 
    if (mailGuide.is(':checked')) { 
     if (value === '') { 
      return false; 
     } else { 
      return true; 
     } 
    } else { 
     return true; 
    } 
}, 'Required'); 

jQuery.validator.addMethod('require_from_group', function (value, e, options) { 
    var validator = this; 
    var selector = options[1]; 
    var validOrNot = $(selector, e.form).filter(function() { 
     return validator.elementValue(this); 
    }).length >= options[0]; 

    if(!$(e).data('being_validated')) { 
     var fields = $(selector, e.form); 
     fields.data('being_validated', true); 
     fields.valid(); 
     fields.data('being_validated', false); 
    } 
    return validOrNot; 
}, 'Please select an option.'); 

jQuery.extend(jQuery.validator.messages, { 
    required: 'Required', 
    email: 'Invalid', 
    digits: 'Invalid', 
    require_from_group: 'Required' 
}); 

任何幫助是極大的讚賞。

Answer 1

所以，我明白了這一點。我使用兄弟選擇器和僞元素來設置複選框的樣式。在我的CSS中，我將輸入設置爲display: none，並且jQuery Validate不會觸發隱藏的元素。