jQuery: Validate if one of many checkboxes is selected (different names, using the jQuery Validation Plugin)

Question

I have a form that has many checkboxes (too many for it to make sense to use their own rules), and I need to use the jQuery Validation Plugin to make sure at least one of them is selected. They all have different names, so most of the solutions I've found so far by Googling don't work for me.

However, I came across this post, which I tweaked a bit to make this extension method:

// method for checking out checkboxes for the form validation
$.validator.methods.checkboxes_checked = function(value,element,param) {
   return ($('#signup #checkboxes input[type=checkbox]:checked').length > 0);
}

... which returns true or false depending if there are any of the checkboxes selected. I don't want to use the method from the above post verbatim, since that would require making separate rules for each checkbox, and as I have a lot of them (20+), that doesn't make much sense to me.

My only issue is that I don't know how to wire this into my validation call, since I don't have a "single" element on the page to tie it too (as in, all my other validation rules are tied to a specific single element, whereas my extension method above would be--in essence--tied to 20+ elements). Here's how my validation call looks now:

// validate the form
$('#signup').validate({
   rules: {
      'bedrooms': { required: true },
      'maxrent': { required: true },
      'term': { required: true },
      'movedate': { required: true },
      'firstname': { required: true, minlength: 2 },
      'lastname': { required: true, minlength: 1, maxlength: 1 },
      'email': { required: true, email: true },
      'day_telephone': { required: true, digits: true, minlength: 10, maxlength: 10 }
   },
   errorPlacement: function(error, element) { error.css('display','none'); },
   highlight: function(element, errorClass) { 
      $(element).fadeOut(function() { $(element).fadeIn(); });
      $('label[for='+$(element).attr('name')+']').css('color','red');
   },
   unhighlight: function(element, errorClass) { $('label[for='+$(element).attr('name')+']').css('color','black'); },
   onkeyup: false
});

I want, basically, for the form itself to check (using the jQuery Validation Plugin) if my extension method returns true before submitting. How can I add this in?

Answer 1

Use jQuery submit() function to prevent the form of being sent before being validated.

Answer 2

$('#myform').submit(
    function(){
        //  check the checkboxes
        if (okay_to_submit)
            forms['myform'].submit();
    }
);

Answer 3

I don't know how your formular looks and where you want your error messages, but have you tried adding a custom validation method?

$.validator.addMethod("checkboxes", function(value, element) {
    return $('input[type=checkbox]:checked').length > 0;
}

And then adding it as a rule for just one of your checkboxes:

rules: {
    'idofacheckbox' : { checkboxes: true }
}

This one checkbox will then be valid if at least one checkbox is selected, or invalid when none are.