jQuery Validation Plugin Multiple Checkboxes

Question

I am having some difficulty in using the jQuery Validator plugin. I have a list of checkboxes with different name attributes and I can't seem to figure out how to ensure that at least one of them has been checked. Everything that I find on Google seems to only work when the name attribute is the same.

Here is some sample code (updated):

<ul id="email_lists">
    <li>
        <input name="checkbox1" type="checkbox" /> List 1
    </li>
    <li>
        <input name="checkbox2" type="checkbox" /> List 2
    </li>
    <li>
        <input name="checkbox3" type="checkbox" /> List 3
    </li>
    <li>
        <input name="checkbox4" type="checkbox" /> List 4
    </li>
</ul>

I want to make sure that at least one of those is checked. Unfortunately, I cannot make the names the same as it is form that submits to a third-party email marketing application and it is expecting specific name attributes for these checkboxes.

Update

I am aware of how to do this using plain jQuery, but I would prefer to use the jQuery Validator plugin since that is how all of the other validation on the page is done.

I can group those checkboxes using jQuery by saying $('#email_lists li');, but I'm not really sure how to use something like that and tell the jQuery Validator plugin to use that as a group.

David Thomas · Accepted Answer · 2010-10-01 02:47:49Z

1

Assuming that you can give the checkboxes a class name (the jQuery needs something to work with):

<input class="validationGroupOne" name="checkbox1" type="checkbox" />
<input class="validationGroupOne" name="checkbox2" type="checkbox" />
<input class="validationGroupOne" name="checkbox3" type="checkbox" />
<input class="validationGroupOne" name="checkbox4" type="checkbox" />

You should be able to plug in the .validationGroupOne class-selector in place of the, usual, name attribute.

answered Oct 1, 2010 at 2:47

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jared Over a year ago

I can give them a class name or since I actually have them in an unordered list, I could so something along the lines of $('#idOfUL input[type=checkbox]'). Where could I find the documentation on .validationGroupOne?

David Thomas Over a year ago

@Jared: that was just a random class-name I used; I don't think it has any importance, or relevance, to anything outside of this example. And yeah, presumably you could access them via the ul just as easily. I've not worked with this plug-in though, so I'm not 100%.

Jared Over a year ago

Ah gotcha, I thought that was actually a rule or extra method that is part of the jQuery Validation plugin. I guess my question then is how would I then tell the jQuery Validation plugin to then use that group? That is where I think my confusion is.

webmaster_sean · Accepted Answer · 2013-01-09 22:40:31Z

0

This was my solution :-)

Use:

<div id="list">
<input name="chkbox" type="checkbox" />
<input name="chkbox" type="checkbox" />
<input name="chkbox" type="checkbox" />
<input name="chkbox" type="checkbox" />
</div>

<input type="hidden" name="the_real_field_name" />

Then in jquery validate plugin block:

rules : {
       chkbox: "required"
        },

Then store the values as an array into a single hidden field like:

function updateInput() {
    var allVals = [];
    $('#list :checked').each(function() {
        allVals.push($(this).val());
    });
    $('#the_real_field_name').val(allVals);
}
$(function() {
    $('#list input').click(updateInput);
    updateInput();
});

answered Jan 9, 2013 at 22:40

community wiki

webmaster_sean

Collectives™ on Stack Overflow

jQuery Validation Plugin Multiple Checkboxes

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related