如何使用 jquery 验证插件验证 select2 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29947041/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I validate select2 elements with using jquery validation plugin?
提问by midstack
I use select2 3.5.2 and jquery validation 1.13.1 .I could add error class to select2 elements with using validation plugin "highlight" method but when I select a value I can't remove that error class. How can I solve this?
我使用 select2 3.5.2 和 jquery 验证 1.13.1 。我可以使用验证插件“highlight”方法将错误类添加到 select2 元素，但是当我选择一个值时，我无法删除该错误类。我该如何解决这个问题？
HTML
HTML
<form id="test" class="frm">
<div>
<input type="text" name="name" />
</div>
<div>
<label for="singleselect"></label>
<select class="sl" id="singleselect" name="singleselect">
<option></option>
<option value="val1">Val-1</option>
<option value="val2">Val-2</option>
</select>
</div>
<div>
<label for="multipleselect"></label>
<select class="sl" id="multipleselect" name="multipleselect" multiple="multiple">
<option></option>
<option value="val1">Val-1</option>
<option value="val2">Val-2</option>
</select>
</div>
<button class="btn">Submit</button>
</form>
JS
JS
$(document).ready(function () {
$('.sl').select2({
placeholder:'Select'
})
$.validator.setDefaults({
ignore: []
});
$('#test').validate({
errorElement: 'span',
errorClass: 'error',
rules: {
singleselect:'required',
multipleselect:'required',
name:'required'
},
highlight: function (element, errorClass, validClass) {
var elem = $(element);
elem.addClass(errorClass);
},
unhighlight: function (element, errorClass, validClass) {
var elem = $(element);
if(elem.hasClass('sl')) {
elem.siblings('.sl').find('.select2-choice').removeClass(errorClass);
} else {
elem.removeClass(errorClass);
}
}
});
});
回答by Sparky
Since the original selectelements are hidden by the Select2 plugin, the jQuery Validate plugin can no longer find any triggering events to automatically fire validation when the value is changed.
由于selectSelect2 插件隐藏了原始元素，jQuery Validate 插件无法再找到任何触发事件来在值更改时自动触发验证。
You simply have to create a custom handler to programmatically trigger validation, using the .valid()method, whenever the value changes...
您只需创建一个自定义处理程序，以便.valid()在值更改时使用该方法以编程方式触发验证...
$('select').on('change', function() { // when the value changes
$(this).valid(); // trigger validation on this element
});
DEMO: https://jsfiddle.net/8Lyfa3k2/4/
演示：https: //jsfiddle.net/8Lyfa3k2/4/
Your unhighlightfunction was apparently broken. This seems to work better...
您的unhighlight功能显然已损坏。这似乎效果更好......
unhighlight: function (element, errorClass, validClass) {
var elem = $(element);
elem.removeClass(errorClass);
}
DEMO 2: https://jsfiddle.net/8Lyfa3k2/5/
