在我的引导项目中，我尝试使用插件 select2 但我意识到
如果您使用此插件，则无法再使用验证插件验证我表单中的选择字段。
我会避免使用商业插件引导验证器。
<div class="container">
<div class="row">
<form id="test_form" action="?">
<div class="col-md-3">
<div class="form-group">
<label for="name">Foo</label>
<select class="form-control" id="foo" name="foo">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="name">Bar</label>
<select class="form-control" id="bar" name="bar">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
<div class="col-md-1">
<button type="submit" class="btn btn-primary">VALIDATE</button>
</div>
</form>
</div>
</div>
JS
/* select 2 plugin */
$('select#foo').select2();
/* Validation */
$("#test_form").validate({
rules:
{
foo: { required: true },
bar: { required: true }
},
errorPlacement: function (error, element) {
$(element).addClass('err');
},
success: function (label, element) {
$(element).removeClass('err');
},
submitHandler: function(form) {
alert("validation ok");
}
});
您认为我该如何解决这个问题？谢谢
MY DEMO
好的。这对我有用
/* select 2 plugin */
$('select#foo').select2();
/* Validation */
$("#test_form").validate({
ignore: 'input[type=hidden]',
rules:
{
foo: { required: true },
bar: { required: true }
},
errorPlacement: function (error, element) {
$(element).parent().addClass('has-error');
},
success: function (label, element) {
$(element).parent().removeClass('has-error');
},
submitHandler: function(form) {
alert("validation ok");
}
});
我添加了一个“ignore: 'input[type=hidden]',”选项，因为 Select2 脚本向原始输入添加了一个隐藏选项，而 Jquery 验证器似乎忽略了它。然后我将元素上的错误类从“err”更改为父元素上的“has-error”（具有 form-group 类的 div）
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
