jQuery Validate : require_from_group Not Poiring

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 유효성 검사는 숨겨진 요소에서 실행되지 않습니다.