我有一个表单,我想在其中验证一些下拉组合(一个字段必须具有选定的值),其中select组合框使用selectpicker。
为此,我使用jquery validate和其他方法
验证脚本如下所示
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”方法。
codepen to reproduce
