require at least one checkbox with nested names

Question

Update: I found out my added method was not being called because I was calling addClassRules for my form class. I don't know why I can't do that, but I fixed it by adding a hidden form field with no value and apply the custom validation to that field.

I have a section of my form where I am requiring at least on checkbox be checked. Originally I validated with:

$.validator.addMethod('kegRequired', $.validator.methods.required, 'Choose at least one keg size');
$.validator.addClassRules('kegsize', {kegRequired: true});

Where each checkbox looked like this:

input class="kegsize" name="33kegsizes[]" type="checkbox" value="SixthBbl"

The number was an id of the parent 'vendor'.

This stopeed working when I refactored the form to look like this

input class="kegsize" name="vendors[33][kegsize][SixthBbl]" type="checkbox" value="SixthBbl"

This ends up regarding every checkbox as required. I would like to be able to just say 'vendors[]kegsize[]': required (like this non-working fiddle http://jsfiddle.net/7rjcyej6/ ).

Here is a different attempt, but this is not working and I'm not sure why:

$.validator.addMethod('kegRequired', function(value, element, params) {
    if ($(element).find('input:checked .kegsize').length()){
        return true
    }else{
        return false
    }
}, 'Choose at least one keg size');

$.validator.addClassRules('keg-size-price-form', {kegRequired: true});

How I can require that at least one checkbox is selected when I have the nested naming?

Answer 1

Maybe try it this approach instead.

var $element = $(element).find('input:checked');
var $length = $element.length;

if ($length >= 1){
    return true
}else{
    return false
}

Answer 2

Try to use length instead of length()

if ($(element).find('input:checked .kegsize').length > 0){
    return true
}else{
    return false
}