如何使用 jQuery 验证插件 bootstrap-select？

Question

我正在使用 jQuery 验证 插件（jqueryvalidation.org ) and trying to validate dropdown. The problem is that my dropdown use bootstrap-select plugin and that means library converts "normal" dropdown into div (for styling, live-search etc.) more info about boostrap-select - https://silviomoreto.github.io/bootstrap-select/examples/.

我的问题是如何在此 boostrap-select 下拉菜单中使用 jQuery 验证器插件选项。

这是我的代码

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 验证器配置（规则和消息）

<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>

如果我在表单控件中更改下拉菜单 class，则此代码有效（但是我的下拉菜单没有 "nice" 外观和我从 bootstrap selectpicker 库中获得的其他功能. 这里是 Bootstrap 下拉库的例子 (https://silviomoreto.github.io/bootstrap-select/examples/)

谢谢

Answer 1

问题是 select 选项被隐藏并且在 jQuery 验证器配置中写入 - 忽略隐藏的元素所以你必须更改 jQuery 验证库配置文件：

ignore: ":hidden"

进入

ignore: ""

您可以根据 jQuery 库版本从第 255 - 265 行找到此选项。有关相同问题的更多信息，您可以在 GitHub bootstrap-select issues -> https://github.com/silviomoreto/bootstrap-select/issues/215

上找到

希望这对您有用！

如何使用 jQuery 验证插件 bootstrap-select？

How to use jQuery Validate plugin for bootstrap-select?

jquery

jquery-validate

twitter-bootstrap