我正面临着使用jquery validate plugin验证select使用bootstrap-select.js插件进行美化的问题。 bootstrap-select.js期待类selectpicker并遵循一行代码:
$('.selectpicker').selectpicker();
用于美化选择html。
然而,它使用jquery validate插件导致验证问题。除非并且直到类selectpicker未被删除,否则select in not at all validated。删除类后,将正确执行验证。 以下是我的选择html:
<select class="input-medium required" id="editCategory_sltCategoryName"
name="editCategory_sltCategoryName">
<option value="">
Select Category
</option>
<option>
Reusable Components
</option>
<option>
BU Connects
</option>
</select>
以下是js:
$('#frm_editCategory').validate({
rules: {
editCategory_sltbuName: {
required: true
},
editCategory_sltCategoryName: {
required: true
},
editCategory_categoryName: {
minlength: 2,
required: true,
buname: true
},
editCategory_categoryDescription: {
minlength: 2,
required: true,
buname: true
}
},
highlight: function(element) {
$(element).closest('.control-group')
.removeClass('success').addClass('error');
},
success: function(element) {
element.text('OK!').addClass('valid')
.closest('.control-group')
.removeClass('error').addClass('success');
},
submitHandler: function(event) {
return true;
}
});
我已经尝试过为它编写自定义方法,但它没用。
答案 0 :(得分:18)
我会尽力根据您所描述的内容回答您的问题,因为我相信我遇到了类似的问题,并且能够解决问题。
首先,我假设您使用select
方法正确初始化了selectpicker()
。上面,你写了
$('.selectpicker').selectpicker();
但是你没有select
个selectpicker
个元素,所以我想你的意思是
$('select').selectpicker();
当您致电selectpicker()
时,Bootstrap会在之后插入其他元素(div
,button
,span
,ul
和li
)你的select
元素。但请注意, Bootstrap将hide()
原始select
元素。 由于隐藏了select
,因此JQuery Validate会在提交表单时忽略对其的验证。这是主要问题。
要告诉Jquery验证不忽略隐藏的选择输入,您可以执行以下操作...
// Initialize form validation rules, submit handler, etc.
$('#frm_editCategory').validate({
.
.
.
});
// The default value for $('#frm_editCategory').validate().settings.ignore
// is ':hidden'. Log this to the console to verify:
console.log($('#frm_editCategory').validate().settings.ignore);
// Set validator to NOT ignore hidden selects
$('#frm_editCategory').validate().settings.ignore =
':not(select:hidden, input:visible, textarea:visible)';
为什么还需要加入input:visible
和textarea:visible
?之前,设置是忽略所有隐藏的输入。如果您只忽略:not(select:hidden)
,则会忽略不隐藏select
的任何输入。这是太许可,因为可见input[type=text]
不隐藏select
。所以,它也会被忽略。我们想要的是忽略任何元素:
- is *not* a hidden `select`
- *is* a hidden `input`
- *is* a hidden `textarea`
要将此全部装入:not
选择器,您要忽略以下任何元素:
- is *not* a hidden `select`
- is *not* a visible `input`
- is *not* a visible `textarea`
...因此
$('#frm_editCategory').validate().settings.ignore =
':not(select:hidden, input:visible, textarea:visible)';
答案 1 :(得分:4)
$('#frm_editCategory').validate({
ignore: ":hidden:not(.selectpicker)"
});
答案 2 :(得分:4)
这对我来说是完美无缺的:
jQuery / javascript:
$(document).ready(function() {
$.validator.setDefaults({
/*OBSERVATION: note how the ignore option is placed in here*/
ignore: ':not(select:hidden, input:visible, textarea:visible)',
/*...other options omitted to focus on the OP...*/
errorPlacement: function (error, element) {
if (element.hasClass('bs-select')) {
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: 强>
<select class="input-medium bs-select required">
<option value="">Select Category</option>
<option>Innovation</option>
<option>Reusable Components</option>
<option>BU Connects</option>
</select>
说明:
观察:根据@Alvin Lee的答案设置表单元素上的ignore
选项,如下所示,但有其警告;
$('#myform').validate().settings.ignore =
':not(select:hidden, input:visible, textarea:visible)';
问题: 引导选择元素已经过验证,但在每个其他输入元素上显示默认消息This field is required
,而不是使用所有自定义验证覆盖它先前配置的消息。
修复: 将ignore
设置移至$.validator.setDefaults({...})
块...应该这样做!
答案 3 :(得分:2)
这是一个对我有用的简单解决方案:
var validator = $('#frm_editCategory').validate({
.
.
.
});
$('select.input-medium').on('change', function () {
validator.element($(this));
});
那是