【发布时间】：2017-06-02 08:36:27
【问题描述】：
我正在使用 jQuery Validate 插件 (jqueryvalidation.org) 并尝试验证下拉菜单。问题是我的下拉菜单使用bootstrap-select 插件，这意味着库将“正常”下拉菜单转换为div（用于样式、实时搜索等）更多关于boostrap-select - https://silviomoreto.github.io/bootstrap-select/examples/ 的信息。
我的问题是如何在 boostrap-select 下拉列表中使用 jQuery Validator 插件选项。
这是我的代码
echo $this->Form->input('customer_number', [
'options' => $customer_number_list,
'id' => 'customer_number',
'class' => 'selectpicker',
'empty' => __('All'),
'label' => __('Customer number'),
'value' => $this->request->data['customer_number'] ?? '',
'onchange' => 'getDestinationList()'
]);
下面是 jQuery Validator 配置（规则和消息）
<script type="text/javascript" src="/js/jquery-validation/jquery.validate.js"></script>
<script>
$(document).ready(function() {
$('#change_destination').validate({
rules: {
customer_number: {
required: true
}
},
messages: {
customer_number: {
required: 'Please select a template'
}
},
submitHandler: function(form) { // blocks submission for demo
$('.selectpicker').selectpicker('refresh');
return false;
}
});
});
</script>
如果我在表单控件中更改我的下拉类，则此代码有效（但是我的下拉列表没有“漂亮”的外观以及我从引导选择选择器库中获得的其他功能。这是引导下拉库的示例（@987654323 @)
谢谢
【问题讨论】：
-
您的实际下拉菜单可能存在于 DOM 中的某个位置，但可能被 CSS 隐藏了。找到那个隐藏的元素，找出选择器（devtools 将帮助解决这个问题）并尝试验证它。
-
你说得对，真正的选择元素存在于正文中并且它是隐藏的，但是 jQuery Validator 插件不会生成“错误”消息，因为如果你从下拉列表中选择某些东西 - 选择的标签不会出现在真正的选择元素中，它只显示在 bootstrap-select 的那个 div 列表中...
标签： jquery twitter-bootstrap jquery-validate