我正在尝试使用jQuery Validation来显示一条错误消息,指出至少需要选中一个复选框。
验证有效,但错误消息显示在错误的Label元素中。它应显示在<label for="events[]" ...
中,但应显示在<label for="events_0" ...
有帮助吗?
这是我的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>