Question

我正在使用 jQuery Validate 插件（jqueryvalidation.org）并尝试验证下拉列表。问题是我的下拉列表使用bootstrap-select插件，这意味着库将“正常”下拉列表转换为div（用于样式，实时搜索等）有关boostrap-select的更多信息 - {{3 }}

我的问题是如何在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>

如果我在form-control中更改我的下拉列（但是我的下拉列表没有“漂亮”的外观和其他功能，我从bootstrap selectpicker库中获取了这个代码。这是一个Bootstrap下拉库的示例（{{ 3}}）

谢谢

Answer 1

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

ignore: ":hidden"

进入

ignore: ""

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

我希望这对你有用！

如何使用jQuery Validate插件进行bootstrap-select？

1 个答案: