我有一个表单，我想验证一些下拉组合（一个字段必须有选定值），其中select组合使用selectpicker。
为此目的，我使用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>
但是我发现以下错误 检查元素小时时发生异常，请检查＆＃39; require_from_group＆＃39;方法
答案 0 :(得分：0)
使用带有select元素的jQuery Validate时，第一个option 必须包含value=""，否则插件会认为option是required已选中且不会评估<select>规则;对于value=""，这是唯一重要的规则。
添加groups使您的某些验证工作正常，但它没有清除控制台错误。
根本原因是您的hours选项。您在此处指定了groups: {
timeGroup: "hours minutes"
},
，这是未定义的。
select这应该与您的hour匹配，groups: {
timeGroup: "hour minutes"
},
名为var links = [
{
"__metadata": {
"id": "",
"uri": "http://www.whatever.com"
},
"Id": 01,
"Title": "Link 01 - test category 01",
"Link": "https://www.google.com",
"Category": {
"__metadata": {
"type": ""
},
"results": [
"Test Category 01"
]
},
"Image": null,
"ID": 01
},
{
"__metadata": {
"id": "",
"uri": "http://www.whatever.com",
"etag": "",
"type": ""
},
"Id": 02,
"Title": "Link 02 - test category 01",
"Link": "https://www.google.com",
"Category": {
"__metadata": {
"type": ""
},
"results": [
"Test Category 01"
]
},
"Image": null,
"ID": 02
},
{
"__metadata": {
"id": "",
"uri": "http://www.whatever.com",
"etag": "",
"type": ""
},
"Id": 03,
"Title": "Link 01 - test category 02",
"Link": "https://www.google.com",
"Category": {
"__metadata": {
"type": ""
},
"results": [
"Test Category 02"
]
},
"Image": null,
"ID": 209
},
{
"__metadata": {
"id": "",
"uri": "http://www.whatever.com",
"etag": "",
"type": ""
},
"Id": 210,
"Title": "Link 02 - test category 02",
"Link": "https://www.somerandomdomain.com",
"Category": {
"__metadata": {
"type": ""
},
"results": [
"Test Category 02"
]
},
"Image": null,
"ID": 210
}
]
//category arr
var categoryArr = [
"Test Category 01",
"Test Category 02",
"Test Category 03"
]
var categories = categoryArr.map(function(label){
var category = {}
category.label = label
category.links = []
for(var i in links){
if(links[i].Category.results.indexOf(label)!=-1)
category.links.push(links[i])
}
return category
})
var menu = $("#output2");
$.each(categories, function (catIndex, category) {
var item = $('<div>').addClass('navContainer'),
title = $('<h4>'),
linklist = $('<ul>')
title.text(category.label)
$.each(category.links, function(linkIndex, link) {
var li = $('<li>')
// ADD LINK
$('<a>').attr('href',link.Link)
.text(link.Title)
.appendTo(li);
li.appendTo(linklist)
})
// ADD EVERYTHING
item.append(title,linklist);
// DISPLAY TO CONTAINER
item.appendTo(menu);
}) ...
.navContainer {
border: 1px solid grey;
margin: 10px;
padding:5px;
}
.links ul li {
list-style-type:none;
}
a{
display: block;
}