开发者

jQuery Validate Plugin Checkbox Group Rules

I'm using the jQuery Validate plugin to require that at least one checkbox is checked in a group of checkboxes. Here's an example of the setup:

<input type="checkbox" name="test[name1]" id="testid1" class="required">
<input type="checkbox" name="test[name2]" 开发者_Go百科id="testid2" class="required">

And the JS:

$("#myform").validate({
    groups: {
        checkboxes: "test[name1] test[name2]"
    }
}

I've been able to narrow down the problem to the fact that the inputs names have "[ ]" in them which I'm assuming is messing with the string parsing of the names. The platform I'm using however requires that I use brackets. This seems like it could be a common problem so maybe someone else has come across it and can help me out.

For reference, I've tried:

checkboxes: "testname1 testname2"

works but can't use it.

checkboxes: "'test[name1]' 'test[name2]'"

doesn't work.


The point of the name attribute is to group related checkboxes/radio buttons together. So a group of checkboxes that act as a group should all have the same name attributes (but each with unique id attributes). Assuming you have this:

<input type="checkbox" name="test" id="testid1">
<input type="checkbox" name="test" id="testid2">

then the following JS will work:

$(formSelector).validate({
  rules: {
    test: "required"
  },
  messages:
    test: "Please select an item"
  }
});


Javascript checkbox group check without jQuery:

<script>    
    function checkboxGroup(frm) {
        // set send to false first
        bSend = false;
        // array of all inputs in the form
        aInputs = frm.getElementsByTagName("input");
        // loop through the inputs array
        for(i=0;i<aInputs.length; i++) {
            if(
                aInputs[i].getAttribute("type")=="checkbox"
                &&
                aInputs[i].getAttribute("name")=="test[]"
            ) {
                // If one of the checkeboxes named test[]
                // is checked, bSend will be set true           
                if(aInputs[i].checked) bSend = true;
            }
        }
        // If none of the checkboxes named test[] are checked
        // bSend will still be false hence not send the form
        return bSend;
    }
</script>

The HTML form I used for testing:

<form method="post" onsubmit="return checkboxGroup(this)">
    <input type="checkbox" name="test[]" value="name 1">
    <input type="checkbox" name="test[]" value="name 2">
    <input type="checkbox" name="test[]" value="name 3">
    <input type="checkbox" name="mom[]" value="name gg">
    <input type="submit" value="test">
</form>


I'm going to guess that your platform is PHP based. PHP's shortcut of using [] to create arrays in the submitted form data is convenient up to a point, but those characters are illegal in id and name attributes.

I just had to do the same thing, and I found a simple answer buried at http://docs.jquery.com/Plugins/Validation/Methods/minlength#length

test: { minLength: 1 }

If your checkboxes all have identical name attributes ("test", not "test[x]").

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜