jquery - 如何使用 jQuery Validate 插件进行 Bootstrap 选择？

Question

这个问题已经有答案了:

Jquery bootstrap select2 plugin issue with validate plugin (1 个回答)

已关闭 6 年前。

我正在使用 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 验证器配置(规则和消息)

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

如果我在表单控制中更改下拉菜单类，则此代码有效(但我的下拉菜单没有“漂亮”的外观和我从 Bootstrap 选择选择器库获得的其他功能。这是 Bootstrap 下拉库的示例(https://silviomoreto.github.io/bootstrap-select/examples/)

谢谢

Answer 1

问题是选择选项被隐藏，并且在 jQuery 验证器配置中写入 - 忽略隐藏元素，因此您必须更改 jQuery 验证库配置文件:

ignore: ":hidden"

进入

ignore: ""

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

我希望这对您有用!