Question

我有一张表格供员工在发布工单时使用。它有一个名为“受影响的部门：”的部门，有5个部门。在表单发送之前必须至少检查一个部门。我已经使用了这部分，但是如果选中了第一个复选框，则错误消息只会消失，但即使选中了第二个或第三个复选框，它也会保留在那里。即使在检查部门时错误没有消失，表单也会按预期工作。

如果选中任何复选框，我只希望错误消失。

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>

我做错了什么？我已经尝试将<span class="error"></span>放在标签上方，但它仍无效。

Answer 1

这个怎么样？

$(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; }
    });
});

Answer 2

弄清楚我的问题。我搬了

groups: {
            checks: checkbox_names
        }

出自

$('#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
        }

    },

所以现在它看起来像

$('#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
    },

感谢大家的帮助！

确保选中至少1个复选框

2 个答案: