jQuery Validate: require_from_group Not Firing

Question

On my form, I am trying to require at least one checkbox be required. However, the 'require_from_group' function doesn't seem to be getting called.

Here is the form:

<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>

Here is my 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'
});

Any help is greatly appreciated.

Answer 1

So, I figured this out. I was using sibling selectors and pseudo elements to style the checkbox. In my CSS, I set the input to display: none , and jQuery Validate will not fire on elements that are hidden.