jQuery 验证多选仅适用于双击答案

【问题标题】：jQuery validate for multiselect works only on double clickjQuery 验证多选仅适用于双击
【发布时间】：2014-09-09 20:53:22
【问题描述】：

我有一个相当奇怪的问题。仅当我双击按钮单击时才会触发我的验证消息。我认为 Bootstrap 多选和 jQuery 插件存在一些已知问题。

请提出一些解决方法。

JS Fiddle

这里是代码。

<link href="../../Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../../Content/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="../../Scripts/bootstrap-multiselect.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>

 <form id="myform" action="" method="post">

 <select id="idselect" name="idselect" class="multiselect" multiple="multiple">
     <option value="1">A</option>
     <option value="2">B</option>
     <option value="3">C</option>
 </select>

 <input id="test" type="submit" name="submit" value="Submit" />

 </form>

jQuery

<script type="text/javascript">

    $(document).ready(function () { 
        $('.multiselect').multiselect();


        $("#myform").validate({
            rules: {
                idselect: {
                    required: true
                }
            },
            messages: {
                idselect: {
                    required: "Select atleast one"
                }
            }   
        });

        $('#test').click(function () {
            $("#idselect").valid(); // when i do this based on a suggestion from my previous question, i can at least make it work with a double click. else it wont just work.

        });

    });  
</script>

我不确定如何让引导环境进入小提琴。让我知道我怎样才能更清楚地回答这个问题。问题很简单 - 当我双击时，我会看到验证消息，否则它不会只显示出来。有工作正常的texboxes。问题出在multiselect

【问题讨论】：

我不明白您为什么要使用来自submit 按钮的click 事件。那是不是您第一个问题的建议。由于您希望在选择选项时清除消息，因此您需要绑定到select 的change 事件，而不是button。
请学习如何使用 jsFiddle 并将正确的引导资源添加到我开始为您构建的这个资源中。请参阅左侧面板中的“外部资源”。 jsfiddle.net/bdw1nv9z/2
在问题中添加小提琴，jsfiddle.net/bdw1nv9z/5

标签： jquery twitter-bootstrap-3 jquery-validate bootstrap-multiselect

【解决方案1】：

由于多选插件为您的原始 select 提供了 display:none，并且 jQuery Validate 插件默认会忽略所有隐藏元素，因此您需要禁用该功能。

我只是在 jQuery Validate 中添加了ignore 选项，其中[] 作为参数告诉该插件不要忽略任何内容。

$("myform").validate({
    // rules & options
    ignore: [],
    ....

另外，根据您之前的问题和current jsFiddle，继续在select 上使用change 事件处理程序，而不是在您的按钮上使用click 处理程序。 （如前所述，这是必需的，因为插件似乎存在选择项目不会触发验证的问题。）

$("#idselect").on("change", function() {
    $(this).valid();
});

演示：http://jsfiddle.net/bdw1nv9z/8/

【讨论】：