jQuery Validation at least one checkbox is selected

jquery, jquery-validate

Solution

You will have to change the name attributes of the checkboxes, and add a rule for it with the `minlength` set to 1.

You can after show the custom message and append it to `#error_msg3` with :

if(element.attr("name") == "check") error.appendTo("#error_msg3")

EDIT

$("input[type='checkbox'][name='check']").change(function() {
    if ($("input[type='checkbox'][name='check']:checked").length){
        $(this).valid()
    }
})

EDIT 2

I've updated the Fiddle, now the message toggles correctly when you have at least one checkbox checked or not.

$("input[type='checkbox'][name='check']").change(function() {
    $('#submitDetails').valid();
});

Fiddle here

Problem

I have the following piece of html code for form checkboxes ``` <div class="drinking col-xs-12"> <div class="col-xs-7 drinkingLeft"> <input type="checkbox" name="allwines" id="allwines" value="0" class="require-one col-xs-1 styled myClassA" value="0" data-label="All Wines" /> <input id='allwinesHidden' type='hidden' value='0' name='allwines'> </div> <div class="col-xs-5 drinkingLeft"> <input type="checkbox" name="beer" id="beer" value="0" class="require-one col-xs-1 styled myClassB" value="0" data-label="Beer" /> <input id='beerHidden' type='hidden' value='0' name='beer'> </div> <div class="clearix"></div> <div class="col-xs-7 drinkingLeft"> <input type="checkbox" name="redwines" id="redwines" value="0" class="require-one col-xs-1 styled myClassC" value="0" data-label="Red Wines" /> <input id='redwinesHidden' type='hidden' value='0' name='redwines'> </div> <div class="col-xs-5 drinkingLeft"> <input type="checkbox" name="cider" id="cider" value="0" class="require-one col-xs-1 styled myClassD" value="0" data-label="Cider" /> <input id='ciderHidden' type='hidden' value='0' name='cider'> </div> <div class="clearix"></div> <div class="col-xs-7 drinkingLeft"> <input type="checkbox" name="whitewines" id="whitewines" value="0" class="require-one col-xs-1 styled myClassE" value="0" data-label="White Wines" /> <input id='whitewinesHidden' type='hidden' value='0' name='whitewines'> </div> <div class="col-xs-5 drinkingLeft"> <input type="checkbox" name="spirits" id="spirits" value="0" class="require-one col-xs-1 styled myClassF" value="0" data-label="Spirits" /> <input id='spiritsHidden' type='hidden' value='0' name='spirits'> </div> <div class="clearix"></div> <div class="col-xs-7 drinkingLeft"> <input type="checkbox" name="sparkling" id="sparkling" value="0" class="require-one col-xs-1 styled myClassG" value="0" data-label="Sparkling/Champagne" /> <input id='sparklingHidden' type='hidden' value='0' name='sparkling'> </div> <div class="col-xs-5 drinkingLeft"> <input type="checkbox" name="fortified" id="fortified" value="0" class="require-one col-xs-1 styled myClassH" value="0" data-label="Fortified" /> <input id='fortifiedHidden' type='hidden' value='0' name='fortified'> </div> <div id="error_msg3"></div> <div class="clearix"></div> </div> </div> ``` I want to make sure that at least one of the check boxes is selected. I want that NOT as an alert box ; however the message need to show up in the div error-msg3. Please note that all the inputs have different class names and ids. A staging link is at https://bitly.com/1i3f1MY I am using jQuery validation to validate rest of the form. Will be nice to get solution through jquery validation. Thanks in advance

Original source