jQuery 在选择组合丢弃错误时验证其他方法

Question

我有一个表单，我想在其中验证一些下拉组合(一个字段必须具有选定的值(，其中选择组合正在使用选择选择器。

为此，我将jQuery验证与其他方法一起使用

验证脚本如下所示

var timesRegister = $('#registerTime').validate({
ignore: '',
debug: true,
groups: {
timeGroup: "hours minutes"
},
rules: {
project_id: {
required: true
},
datum: {
required: true
},
hour: {
require_from_group: [1, ".time-group"]
},
minutes: {
require_from_group: [1, ".time-group"]
}
},
messages: {
project_id: "Please Select the working on Project!",
datum: "Please enter working date!",
//hour: "Please select the working hour/hours!",
minutes: "Please select the working minutes!",
hours_descr: "Please describe short the task!",
},
submitHandler: function (form) {
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: $(form).serialize()
},
success: function () {

}, error: function (r) {
}
});
}
});

标记

<form method="POST" action="/times" accept-charset="UTF-8" id="registerTime" novalidate="novalidate">
<input name="_token" type="hidden" value="DezD0WQdWvXXW4If2xg5NhnAFd2vnkK6nNDXRUQ2">
<input name="account_id" type="hidden" value="3423">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header ui-draggable-handle">
<!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>-->
<h4 class="modal-title">Register your time!</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="alert alert-danger hidden" id="time-error"></div>

<div class="col-md-12">
<div class="form-group">
<label for="project" class="control-label">Select Project</label>
<select class="form-control" name="project_id">
<option>Select Project</option>
<option value="project1">Project</option>
<option></option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="project" class="control-label">Select Day(s)</label>
<div class="input-group date">
<input name="datum" class="form-control input-sm" id="working_hours" type="text">
<span class="input-group-addon">
<i class="glyphicon glyphicon-th fa fa-calendar"></i>
</span>
</div>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="hour" class="control-label">Select Hours</label>
<select class="selectpicker time-group form-control" id="hour" name="hour">
<option>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="minutes" class="control-label">Select Minutes</label>
<select class="selectpicker time-group form-control" id="minutes" name="minutes">
<option>0</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="45">45</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<label for="">Description</label>
<textarea name="hours_descr" id="" class="form-control"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-outline dark">Close</button>
<button type="submit" id="submitTime" class="btn green">Save</button>
</div>
</div>
</div>
</form>

但给我留下以下错误检查元素小时时发生异常，请检查"require_from_group"方法。

要重现的代码笔

Answer 1

当使用带有select元素的 jQuery Validate 时，第一个option必须包含value=""，否则插件已经认为选择了option并且不会评估required规则;对于<select>，这是唯一重要的规则。

添加value=""使一些验证正常工作，但它没有清除控制台错误。

根本原因是您的groups选择。 您在此处指定了未定义hours。

groups: {
timeGroup: "hours minutes"
},

这应该与您的select匹配，该名为hour...

groups: {
timeGroup: "hour minutes"
},

工作演示：jsfiddle.net/v12rdyh6/