Making sure at least 1 checkbox is checked

Question

I have a form for employees to use when posting a work order. It has a section called "Departments Affected:" with 5 departments. At least 1 department must be checked off before the form can send. I've got this part working however the error messages only disappears if the first checkbox is checked but stays there even if the second or third checkboxes are checked. The form works as expected even if the error doesn't disappear when a department is checked.

I just want the error to go away if any checkbox is checked.

jQuery:

 // Check if at least 1 "Departments Affected" checkbox has been checked.
            $.validator.addMethod('require-one', function(value) {
                return $('.require-one:checked').size() > 0;
            }, "Pick at least 1 affected deparment before you save.<br />");
            var checkboxes = $('.require-one');
            var checkbox_names = $.map(checkboxes, function(e, i) {
                return $(e).attr("name");
            }).join(" ");

        $('#workorder2').validate({
            errorLabelContainer: ".formerror",
            rules : {
                "workorder[kickoff_changing]" : 'required',
                "workorder[rnd]" : 'required',
                "workorder[is_tryout]" : 'required',
                "workorder[is_final_shipment_offshore]" : 'required',
                "workorder[is_final_shipment_customer]" : 'required',
                groups: {
                    checks: checkbox_names
                }

            },
            errorPlacement: function(error, element) {
                element.siblings('.error').html(error);

            },
            submitHandler: function (form) {
                console.log($('#work_direction'));

               if(!confirm('Are you sure you want to save this workorder?')){
                    return false;
                }
                console.log($(form).valid());
                form.submit();
            }

HTML:

 <tr>
                        <th>Departments Affected?</th>
                        <td>
                            <ul style="list-style-type:none;">
                                <li>
                                <span class='error'></span>
                                    <input id="cad" type="checkbox" name="workorder[affect][cad]" class="require-one"/>
                                    <label>Cad (name1, name2)</label>
                                </li>
                                <li>
                                    <input id="design" type="checkbox" name="workorder[affect][design]" class="require-one" />
                                    <label>Design (name)</label>
                                </li>
                                <li>
                                    <input id="shop" type="checkbox" name="workorder[affect][shop]" class="require-one" />
                                    <label>Shop (name)</label>
                                </li>
                                <li>
                                    <input id="cnc" type="checkbox" name="workorder[affect][cnc]" class="require-one" />
                                    <label>CNC (name)</label>
                                </li>
                                <li>
                                    <input type="checkbox" name="workorder[affect][acc]" class="require-one" />
                                    <label>Accounting (name)</label>
                                </li>
                                <li>
                                    <input type="checkbox" name="workorder[affect][china]" class="require-one" />
                                    <label>Offshore (name1, name2)</label>
                                </li> 
                            </ul>
                        </td>
                    </tr>

What am I doing wrong? I've tried placing the <span class="error"></span> above the tags but its still not working.

http://stackoverflow.com/questions/901712/check-checkbox-checked-property-using-jquery?rq=1 This may help — joshuahornby10, Dec 09 '13 at 15:50
@joshuahornby10 did you read my post? The test to check if an item is checked is working. The issue is the second part, the error message. It doesn't disappear if checkbox #2, #3, #4, etc are checked but it still validates as true. Only if checkbox #1 is checked does the error message disappear. — MikeOscarEcho, Dec 09 '13 at 15:54

sulmanpucit · Answer 1 · 2013-12-09T16:49:51.307

0

How about this?

$(document).ready(function() {
    $('#MY_FORM_ID').submit(function() {
        var $fields = $(this).find('input[class="require-one"]:checked');
        if (!$fields.length) {
            $('span.error').html("Kindly select at least one option");
            return false; // The form will *not* submit
        } else { $('span.error').html(""); return true; }
    });
});

edited Dec 09 '13 at 16:49

answered Dec 09 '13 at 15:53

sulmanpucit

456
6
17

Thanks but nope didn't solve my issue. The validation works the problem is that the ERROR MESSAGE only disappears when the first checkbox is checked but stays displayed even if checkbox #2 or #3, etc are checked. I want it to go away when ANY checkbox is checked not just the first one! @sulmanpucit – MikeOscarEcho Dec 09 '13 at 16:27

score 0 · Accepted Answer · answered Dec 09 '13 at 18:04

Figured out my problem. I moved

groups: {
            checks: checkbox_names
        }

out of

$('#workorder2').validate({
    errorLabelContainer: ".formerror",
    rules : {
        "workorder[kickoff_changing]" : 'required',
        "workorder[rnd]" : 'required',
        "workorder[is_tryout]" : 'required',
        "workorder[is_final_shipment_offshore]" : 'required',
        "workorder[is_final_shipment_customer]" : 'required',
        groups: {
            checks: checkbox_names
        }

    },

so now it looks like

$('#workorder2').validate({
    errorLabelContainer: ".formerror",
    rules : {
        "workorder[kickoff_changing]" : 'required',
        "workorder[rnd]" : 'required',
        "workorder[is_tryout]" : 'required',
        "workorder[is_final_shipment_offshore]" : 'required',
        "workorder[is_final_shipment_customer]" : 'required',
    },

     groups: {
            checks: checkbox_names
    },

Thanks everyone for trying to help!

Making sure at least 1 checkbox is checked

2 Answers2