jquery: validate form with multiple checkboxes -- at least one must be checked

Question

I'm trying to validate a form using the validate plugin for jquery. I want to require that the user check at least one checkbox in a group in order for the form to be submitted. Here's my jquery code:

$().ready(function() {
$("#subscribeForm").validate({
   rules:   { list: {required: "#list0:checked"} },
   messages:  { list:  "Please select at least one newsletter"}                                                        
 });
 });

and here's the html form:

<form action="" method="GET" id="subscribeForm">
<fieldset id="cbgroup">
 <div><input name="list" id="list0" type="checkbox"  value="newsletter0" >zero</div>
 <div><input name="list" id="list1" type="checkbox"  value="newsletter1" >one</div>
 <div><input name="list" id="list2" type="checkbox"  value="newsletter2" >two</div>
</fieldset>
<input name="submit" type="submit"  value="submit">

The problem is that the form submits even if nothing is checked. How can I resolve this?

Answer 1

This script below should put you on the right track perhaps?

I changed the submit button to:

<input name="submit" type="button"  value="submit" onclick="onSubmit();">

and this javascript validates

function onSubmit() 
{ 
  var fields = $("input[name='list']").serializeArray(); 
  if (fields.length == 0) 
  { 
    alert('nothing selected'); 
  } 
  else 
  { 
    alert(fields.length + " items selected"); 
  } 
}

and you can find a working example of it here

Answer 2

How about this:

$(document).ready(function() {
    $('#subscribeForm').submit(function() {
        var $fields = $(this).find('input[name="list"]:checked');
        if (!$fields.length) {
            alert('You must check at least one box!');
            return false; // The form will *not* submit
        }
    });
});

Answer 3

$('#subscribeForm').validate( { rules { list: { required: true, minlength: 1 } } });

I think this will make sure at least one is checked.

Answer 4

How about this

$.validate.addMethod(cb_selectone,
                   function(value,element){
                           if(element.length>0){
                               for(var i=0;i<element.length;i++){
                                if($(element[i]).val('checked')) return true;
                               }
                           return false;
                           }
                            return false;
                  },
                  'Please select a least one')

Now you ca do

$.validate({rules:{checklist:"cb_selectone"}});

You can even go further a specify the minimum number to select with a third param in the callback function.I have not tested it yet so tell me if it works.