如何使用jQuery Validate插件进行引导选择？

问题描述：

我正在使用jQuery验证插件（jqueryvalidation.org）并尝试验证下拉列表。问题是我的下拉菜单使用bootstrap-select插件，这意味着库将“正常”下拉菜单转换为div（用于造型，实时搜索等）有关boostrap-select - https://silviomoreto.github.io/bootstrap-select/examples/的更多信息。如何使用jQuery Validate插件进行引导选择？

我的问题是如何在此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 selectpicker库中获得了以下示例的Bootstrap下拉库（https://silviomoreto.github.io/bootstrap-select/examples/）

谢谢

您的实际下拉列表可能存在于DOM中的某处，但可能隐藏在CSS中。找到那个隐藏的元素，找出选择器（devtools将帮助它）并尝试对它进行验证。 – bcosynot

你有权利，真正的选择元素存在于身体，它是隐藏的，但jQuery的Validator插件不会产生“错误”的消息，因为如果你从下拉选择的东西 - 选择的标签不出现在真正的选择元素，它只出现在该div list from bootstrap-select ... – JohnWayne

答

问题是，选择选项是隐藏的，在jQuery的验证配置写入 - 忽略隐藏的元素，所以你必须改变jQuery验证库配置文件：

ignore: ":hidden"

到

ignore: ""

基于jQuery库版本，您可以从第255 - 265行找到这个选项。有关同样的问题，你可以找到在GitHub引导选择问题 - >https://github.com/silviomoreto/bootstrap-select/issues/215

我希望这样，这对你的作品！

谢谢你，它的工作吧！ – JohnWayne

[其实，正确的格式应该是'ignore：[]']（https://stackoverflow.com/a/8565769/594235） – Sparky

@Sparky从JohnWayne那里得到同样的答案... – FreeMooonSpider

如何使用jQuery Validate插件进行引导选择？

相关推荐