在启用提交单击之前,尝试要求两个下拉选择框都有一个选定的选项。缺少什么是不允许插件检查验证?
FORM:
<form role="form" id="bootstrapSelectForm" class="form-horizontal">
<div class="row">
<div class="col-xs-6">
<br>
<h5>Region</h5>
<select class="form-control" name="region" id="region" >
<option value="">Select a Region</option>
<option value="US">US</option>
<option value="UK">UK</option>
<option value="Sales Team">XS (Sales Team)</option>
<option value="Editorial Test">XT (Editorial Test)</option>
</select>
</div>
<div class="col-xs-6">
<br>
<h5>Duration</h5>
<select class="form-control" name="duration" id="duration" >
<option value="">Select a Duration</option>
<option value="5">5 Minutes</option>
<option value="10">10 Minutes</option>
<option value="15">15 Minutes</option>
<option value="20">20 Minutes</option>
<option value="25">25 Minutes</option>
<option value="30">30 Minutes</option>
</select>
</div>
<div class="col-xs-6">
<button type="submit" class="btn btn-default" id="submit">Submit</button>
</div>
</div>
Bootstrap Validator:
$(document).ready(function() {
$('#bootstrapSelectForm')
.find('[name="region"]')
.selectpicker()
.submit(function(e) {
$('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'region');
})
.end()
.find('[name="duration"]')
.selectpicker()
.submit(function(e) {
$('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'duration');
})
.end()
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
region: {
validators: {
callback: {
message: 'Please select region',
}
}
}
},
duration: {
validators: {
message: 'Please select region.'
}
}
}
});
});
答案 0 :(得分:9)
为了使 BootstrapValidator 与其他插件一起使用,您应遵循以下两条规则:
某些插件会隐藏您的字段并创建新元素以更改字段的外观。默认情况下,不会验证隐藏的不可见字段。因此,您需要设置
excluded: ':disabled'
有关详细信息,请参阅excluded选项。
大多数插件在更改字段值后触发事件。通过使用这种事件处理程序,您需要让BootstrapValidator重新验证该字段。
在您的情况下,您只需执行以下操作:
excluded
选项。notEmpty
验证程序代替Callback
验证程序。.submit
使用.change
,以便在字段更改时重新验证字段。见下面的代码:
$('#bootstrapSelectForm')
.find('[name="region"]')
.selectpicker()
.change(function(e) {
$('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'region');
})
.end()
.find('[name="duration"]')
.selectpicker()
.change(function(e) {
$('#bootstrapSelectForm').bootstrapValidator('revalidateField', 'duration');
})
.end()
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
excluded: ':disabled', // <=== Add the excluded option
fields: {
region: {
validators: {
notEmpty: { // <=== Use notEmpty instead of Callback validator
message: 'Please select region'
}
}
}
duration: {
validators: {
notEmpty: { // <=== Use notEmpty instead of Callback validator
message: 'Please select region.'
}
}
}
}
}
});
有关详细信息,请参阅Bootstrap Select示例。