Ensure at least one from a group of three checkboxes is checked using jQuery Validate

问题

I'm using the jQuery Validate plugin on a large form, and have been using the require_from_group method (after posting previously) to ensure at least one from a group of three checkboxes is checked.

However, I've ran into an issue with this where it stops other rules from working. I've applied a suggested patch, but that doesn't seem to work correctly either (as mentioned in the above GitHub issue).

So I need to find another way to validate this group of three checkbox fields (note that I need to specifically target this group of three checkboes, as I have other checkbox fields on the form that don't require validating), but I'm not sure where to start with this now. I'm thinking I need to add some sort of custom rule into my jQuery validate code, but I'm not sure where to start with this now so would appreciate some advice, thanks.

Here's my starting HTML (stripped to bare essentials for this question):

<form class="my_form" method="post" action="/" >

  <div><ul class="form_errors"></ul></div>

  <label><input class="my_checkbox_group" id="my_checkbox_1" name="my_checkbox_1[]" type="checkbox" value="Yes"> My checkbox 1</label>
  <label><input class="my_checkbox_group" id="my_checkbox_2" name="my_checkbox_2[]" type="checkbox" value="Yes"> My checkbox 2</label>
  <label><input class="my_checkbox_group" id="my_checkbox_3" name="my_checkbox_3[]" type="checkbox" value="Yes"> My checkbox 3</label>

  <input type="submit" value="Submit" />

</form>

Here's my starting JS (this makes all three of the checkboxes mandatory, but I only want at least one from three to be checked):

$(".my_form").validate({
  errorLabelContainer: ".form_errors",
  wrapper: "li",
  rules: {
    'my_checkbox_1[]': { required: true },
    'my_checkbox_2[]': { required: true },
    'my_checkbox_3[]': { required: true }
  },
  messages: {
    'my_checkbox_1[]': "This field is required",
    'my_checkbox_2[]': "This field is required",
    'my_checkbox_3[]': "This field is required"
  }
});

Edit 1: Sorry, I should have added that the name attributes of each checkbox can't be the same. These names map to specific custom field names in the CMS, so if they were all the same, the values in the fields wouldn't be saved correctly when the form was submitted. This is also the reason why I never followed the second example on the jQuery Validate demo page.

回答1:

I wrote a custom method that checks to make sure at least one of the three checkboxes is ticked.

It gets the job done without modifying any of your name or id attributes, or adding anything new to the HTML. (However, you had some invalid HTML that I cleaned up a bit.)

$.validator.addMethod("checkboxrule", function (value, element) {
    return ($('#my_checkbox_1').is(':checked') || $('#my_checkbox_2').is(':checked') || $('#my_checkbox_3').is(':checked'));
}, "Select at least one of these three");

Working DEMO: http://jsfiddle.net/u4WM4/

I also used the groups option to put the three messages into one. (You can simply remove it if you want three messages instead.)

The complete jQuery:

$(document).ready(function () {

    $.validator.addMethod("checkboxrule", function (value, element) {
        return ($('#my_checkbox_1').is(':checked') || $('#my_checkbox_2').is(':checked') || $('#my_checkbox_3').is(':checked'))
    }, "Select at least one of these three");

    $('.my_form').validate({ 
        errorLabelContainer: ".form_errors",
        wrapper: "li",
        groups: {
            somename: "my_checkbox_1[] my_checkbox_2[] my_checkbox_3[]"
        },
        rules: {
            'my_checkbox_1[]': {
                checkboxrule: true
            },
            'my_checkbox_2[]': {
                checkboxrule: true
            },
            'my_checkbox_3[]': {
                checkboxrule: true
            }
        }
    });

});

回答2:

Try

HTML

You don't have to use different name array attribute, it can be used like

<label><input class="my_checkbox_group" id="my_checkbox_1" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 1</label>
<label><input class="my_checkbox_group" id="my_checkbox_2" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 2</label>
<label><input class="my_checkbox_group" id="my_checkbox_3" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 3</label>

SCRIPT

In validate Plugin

$('.my_form').validate( {
   errorLabelContainer: ".form_errors",
   wrapper: "li",
   rules: {
      "my_checkbox[]": {
          required: true,
          minlength: 1
   },
   messages: {
      'my_checkbox[]': "This field is required"          
   }
});

From http://docs.jquery.com/Plugins/Validation/Reference#Fields_with_complex_names_.28brackets.2C_dots.29

In simple Jquery

var isChecked=false;
$('input.my_checkbox_group').each(function(){
   if($(this).is(':checked'))
   {
       isChecked=true;
   }
});
if(isChecked==false)
{
   alert("Please select a group");
}

回答3:

i think you need to change name attribute for that. need to set same name for each checkbox.

<label><input class="my_checkbox_group" id="my_checkbox_1" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 1</label>
<label><input class="my_checkbox_group" id="my_checkbox_2" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 2</label>
<label><input class="my_checkbox_group" id="my_checkbox_3" name="my_checkbox[]" type="checkbox" value="Yes"> My checkbox 3</label>

JS CODE

$(".my_form").validate({
  errorLabelContainer: ".form_errors",
  wrapper: "li",
  rules : {
        "my_checkbox[]" : {
            required : true,
            minlength : 1
        }
    },
    messages : {
        "my_checkbox[]" : {
            required : "must have checkbox selected",
            minlength : "atleast 1 checkbox should be checked"
        }
    }
});

来源：https://stackoverflow.com/questions/15238958/ensure-at-least-one-from-a-group-of-three-checkboxes-is-checked-using-jquery-val

标签

jquery

jquery-validate