jQuery的multiselect验证仅在双击时有效

Question

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

请提出一些解决方法。

JS小提琴

这是代码。

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

我不确定如何引导环境。 让我知道如何对这个问题更清楚。 问题很简单-双击我会看到验证消息，否则它不会仅仅显示出来。 有些texbox可以正常工作。 问题是multiselect

Answer 1

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

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

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

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

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

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