Question

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

请建议一些解决方法。

这是代码。

<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

上

Answer 1

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

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

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

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

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

DEMO：http://jsfiddle.net/bdw1nv9z/8/

多选的jQuery验证仅在双击时有效

1 个答案: