Bootstrap select Plugin Not work With jQuery Validation

Question

我使用引导选择插件设计HTML选择框。现在，我为validate添加了jQueryvalidation插件。但是，Validation表单不能与bootstrap选择插件一起使用。

演示在这里

HTML:

<form id="myform">
<select name="year" class="selectpicker">
<option value="">Year</option>
<option value="1">1955</option>
<option value="2">1956</option>
</select>
<br/>
<input type="submit" />
</form>

JS:

$(document).ready(function () {
$('select').selectpicker();
$('#myform').validate({ // initialize the plugin
rules: {
year: {
required: true,
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
});

注意：For check this conflict, remove Line 2 from JS, jQuery Validation Worked.

编辑：使用ignore[]方法修复问题：FIDDLE

$('#myform').validate({ // initialize the plugin
ignore: [],
rules: {
year: {
required: true
}
},
errorPlacement: function(error, element) {
if (element.attr("name") == "year") {
error.insertAfter(".bootstrap-select");
} else {
error.insertAfter(element);
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});

现在这起作用了，但我有新问题：在正常的验证中，选择字段后，错误消息This field is required自动隐藏(或添加任何css，显示成功消息)，但现在，错误消息显示在修复所需字段后。实际操作：当我们选择年份时，错误信息不会隐藏。

如何解决此问题？

Answer 1

select插件隐藏原始select，并创建一个带有无序列表的新select，更新隐藏的select值，但验证插件默认不会验证隐藏元素，您必须使用忽略规则并打开隐藏元素的验证

$('#myform').data("validator").settings.ignore = "";

FIDDLE

或

$('#myform').validate({ // initialize the plugin
ignore: [],
rules: {
year: {
required: true
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});

FIDDLE

Bootstrap select插件从无序列表中创建一个新的下拉列表，原始的select被隐藏，当用户与无序列表交互时，它的值会更新。

这也有移动错误消息的缺点，因为原始的、现在隐藏的选择是正在验证的元素，并且由无序列表组成的新的可见下拉列表通过Bootstrap插入DOM中原始选择的下面，错误消息插入在原始选择之后，但在无序列表之前，因此它出现在自定义下拉列表的上方，而不是像使用原始选择时那样低于它。

要修复它，你可以很容易地移动任何给定元素的错误消息

$('#myform').validate({ // initialize the plugin
ignore: [],
rules: {
year: {
required: true
}
},
errorPlacement: function(error, element) {
if (element.attr("name") == "year") {
error.insertAfter(".bootstrap-select");
} else {
error.insertAfter(element);
}
},
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});

FIDDLE

Answer 2

我也有类似的问题，下面是我如何扩展@adeneo的答案以及从中吸取的教训(这里的帖子)。

注意：对于那些偶然发现这篇文章的人，请阅读@adeneo的回答并(此处的帖子)以了解此解决方案的范围。

对我来说功能完美的结果代码如下：

jQuery/javascript:

$(document).ready(function() {
$.validator.setDefaults({
/*OBSERVATION (1): note the options used for "ignore"*/
ignore: ':not(select:hidden, input:visible, textarea:visible)',
/*...other options omitted to focus on the OP...*/
errorPlacement: function (error, element) {
/*OBSERVATION (2): note how selection is on the class "selectpicker"*/
if (element.hasClass('selectpicker')) {
error.insertAfter('.bootstrap-select');
} else {
error.insertAfter(element);
}
/*Add other (if...else...) conditions depending on your
* validation styling requirements*/
}
});
$('#myform').validate({ 
rules: {
'year': {
required: true
}
},
messages: {
'year': {
required: 'Please select a year from the dropdown'
}
}
});
});

HTML:

<form id="myform">
<select name="year" class="selectpicker">
<option value="">Year</option>
<option value="1">1955</option>
<option value="2">1956</option>
</select><br/>
<input type="submit" />
</form>

解释：

观察(1)：ignore: ':not(select:hidden, input:visible, textarea:visible)'只是指忽略所有非隐藏<select>、非可见<input>和非可见<textarea>元素的验证。

在更简单的英语中，它只是说验证隐藏的<select>，忽略隐藏的<input>和忽略隐藏的<textarea>，这是我们在许多情况下通常想要的我认为这是针对哪些验证应该被忽略或不应该被忽略的更好方法

根据@Alvin Lee在这里的回答，在form元素上设置ignore选项如下是可以的，但有一些注意事项；

$('#myform').validate().settings.ignore = 
':not(select:hidden, input:visible, textarea:visible)';

问题：引导程序选择元素得到验证，但在其他所有输入元素上显示默认消息This field is required，而不是用以前配置的所有自定义验证消息覆盖它。

修复：将ignore设置移动到$.validator.setDefaults({...})块。。。哇！

观察(2)：

我没有像@adeneo指出的那样做if (element.attr("name") == "year") {...}，而是决定在class='selectpicker'上选择。。。然后在javascript中，通过执行if (element.hasClass('selectpicker')) {...}来检查元素是否具有此类。这只是确保了这个规则可以应用于所有引导选择元素，只要它们是用类selectpicker装饰的。

希望这一点足够清楚，并对有类似问题的人有所帮助！

Answer 3

如果您使用"selectpicker"类初始化引导程序选择小部件，我建议通过更改jquery validate:的默认忽略设置来部分解决此问题

$.validator.setDefaults({ ignore: ':hidden:not(.selectpicker)' });

在验证表单之前。这是一种更好的方法，而且您还需要按照adeneo的设想移动错误消息。尽管如此，它仍不会像select那样具有类似的验证行为。隐藏父容器时会出现问题。若不使用bootstrap select，当容器被隐藏时，您的选择将不会验证，但当您使用它时，它仍然会验证。