![](/img/trans.png)
[英]Using jQuery Validate with Select2 for validation not working
[英]jQuery validation select2
我使用 jQuery 驗證插件驗證我的表單。 我使用 jQuery select2 插件更改樣式下拉菜單。 如果驗證回調錯誤我的輸入顯示/添加類錯誤框(紅色邊框)否則顯示/添加類成功框(綠色邊框)。 這在正常輸入中有效,但在 select2 中無效。 當我為選擇框錯誤框(紅色邊框)選擇任何值時,不會隱藏/切換到成功框。 select2 在單擊提交按鈕后起作用。
JS:
$('form').validate({
rules: {
firstname: {
minlength: 3,
maxlength: 15,
required: true
},
lastname: {
minlength: 3,
maxlength: 15,
required: true
}
},
highlight: function (element, errorClass, validClass) {
if (element.type === "radio") {
this.findByName(element.name).addClass(errorClass).removeClass(validClass);
} else {
$(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
$(element).closest('.form-group').find('i.fa').remove();
$(element).closest('.form-group').append('<i class="fa icon-plane icon-2x form-control-feedback"></i>')
}
},
unhighlight: function (element, errorClass, validClass) {
if (element.type === "radio") {
this.findByName(element.name).removeClass(errorClass).addClass(validClass);
} else {
$(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
$(element).closest('.form-group').find('i.fa').remove();
$(element).closest('.form-group').append('<i class="fa icon-plane icon-2x form-control-feedback"></i>');
}
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function (error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
$("#lstColors").select2({
placeholder: "Select a Color",
width: "200px"
});
如何解決這個問題?!
演示:http: //jsfiddle.net/hTPY7/1413/
jquery.validate 沒有注意到 select2 發生了變化。 雖然我不確定為什么會出現這種情況,但您可以通過注意何時提交表單來解決此問題(也許通過將“提交”類應用於用戶提交的任何表單):
$('form').submit(function() {
$(this).addClass('submitted');
});
然后在 select2 更改時調用 $().valid() ,導致 jquery.validate 重新驗證表單:
$('#lstColors').change(function() {
if ($('form').hasClass('submitted'))
$('form').valid();
});
這是一個可以正常工作的 jsFiddle 叉子:http: //jsfiddle.net/Tdafh/1/
我已經在另一個 StackOverflow 問題上回答了這個問題。 您必須采取一些額外的步驟來挖掘由 select2 修改的下拉列表的分層標記。 所有細節和演示都可以在那里看到。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.