如何使用jQuery validate插件进行自举选择

Question

我正在使用 jQuery Validate 插件(jqueryvalidation.org(，并试图验证下拉菜单。问题是我的下拉使用bootstrap-select插件，这意味着库将"正常"下拉列表转换为div(用于造型，实时搜索等(有关boostrap-select-https：//silviomoreto.github.github.io/bootstrap-select/exelect/exlect/examples https：//silviomoreto.githe.githe.githe.githe.gith.gith.gith.gith.gith.3-/.

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

如果我更改了表单控制中的下拉类，则此代码有效(但是，我的下拉列表没有"漂亮"外观和其他功能我从Bootstrap selectPicker库中获得的内容。这是Bootstrap下拉库库(https：https：https：https：https：https：https：//silviomoreto.github.io/bootstrap-select/examples/(

谢谢

Answer 1

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

ignore: ":hidden"

进入

ignore: ""

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

我希望这对您有用！