我正面临着使用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,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;
}
});
解决方法
我会尽力根据你所描述的内容回答你的问题,因为我相信我遇到了类似的问题,并且能够解决它.
首先,我假设您使用selectpicker()方法正确初始化了您的选择.上面,你写道
$('.selectpicker').selectpicker();
但是你没有任何带有类selectpicker的select元素,所以我认为你的意思是
$('select').selectpicker();
当您调用selectpicker()时,Bootstrap将在您的select元素后插入其他元素(div,button,span,ul和li).但请注意,Bootstrap将隐藏()原始的select元素.因为您的select是隐藏的,所以JQuery Validate将在提交表单时忽略它的验证.这是主要问题.
要告诉Jquery Validate不要忽略隐藏的选择输入,您可以执行以下操作…
// 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)';
为什么还需要包含输入：visible和textarea：visible？之前,设置是忽略所有隐藏的输入.如果您只忽略：not(select：hidden),您将忽略任何不是隐藏选择的输入.但这太宽松了,因为可见输入[type = text]不是隐藏选择.所以,它也会被忽略.我们想要的是忽略任何元素：
- is *not* a hidden `select` - *is* a hidden `input` - *is* a hidden `textarea`
要将这一切都安装到：not selector中,您要忽略以下任何元素：
- is *not* a hidden `select` - is *not* a visible `input` - is *not* a visible `textarea`
因此…
$('#frm_editCategory').validate().settings.ignore =
':not(select:hidden,textarea:visible)';
