jQuery验证错误消息,显示复选框组的标签错误

时间:2019-03-21 18:14:34

标签: jquery jquery-validate

我正在尝试使用jQuery Validation来显示一条错误消息,指出至少需要选中一个复选框。

验证有效,但错误消息显示在错误的Label元素中。它应显示在<label for="events[]" ...中,但应显示在<label for="events_0" ...

enter image description here

有帮助吗?

这是我的js

$(document).ready(function() {
    $('#form_reg').validate({
        rules: {
            "events[]": {
                required: true,
                minlength: 1
            },
        },
        messages: {
            "events[]": "Please select at least one type of event."
        }
    });
});

我的表单的核心代码

<div class="form-group row text-right mt-2">
    <label class="col-4 col-form-label">Events</label>
    <div class="col-8 text-left">
        <!--             HERE IS THE LABEL -->
        <label for="events[]" class="text-danger font-weight-bold"></label>
        <!--             checkboxes -->
        <div class="custom-controls-stacked">
            <span id="eventsHelpBlock" class="form-text text-muted">I plan on attending these events. (Check all that apply) Give us a heads up on how many people are attending.</span>
            <div class="custom-control custom-checkbox">
                <input name="events[]" id="events_0" type="checkbox" class="custom-control-input" value="family" validate="required:true, minlength:1">
                <label for="events_0" class="custom-control-label">Family Night</label>
            </div>
        </div>
        <div class="custom-controls-stacked">
            <div class="custom-control custom-checkbox">
                <input name="events[]" id="events_1" type="checkbox" class="custom-control-input" value="reunion">
                <label for="events_1" class="custom-control-label">Reunion</label>
            </div>
        </div>
        <div class="custom-controls-stacked ">
            <div class="custom-control custom-checkbox">
                <input name="events[]" id="events_2" type="checkbox" class="custom-control-input" value="party">
                <label for="events_2" class="custom-control-label">After Party</label>
            </div>
        </div>
    </div>
</div>

0 个答案:

没有答案