jQuery的multiselect验证仅在双击时有效 [英] jQuery validate for multiselect works only on double click

问题描述

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

I have a rather strange issue. My validate message is triggered only when I double click on my button click. I think there are some known issues with Bootstrap multiselect and jQuery plugin.

请提出一些解决方法.

Please suggest some workaround.

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

I am not sure how to get the bootstrap environment into fiddle. Let me know how can I be more clear with the question. The issue is simple - when I double click I see the validate message else it won't just show up. There are texboxes which work fine. The problem is with multiselect

推荐答案

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

Since the multi-select plugin gives your original select a display:none and the jQuery Validate plugin will ignore all hidden elements by default, you'll need to disable that feature.

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

I simply added the ignore option to jQuery Validate, where [] as the parameter tells this plugin to ignore nothing.

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

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

Also, as per your previous question and current jsFiddle, continue using the change event handler on the select, rather than the click handler on your button. (As discussed previously, this is needed because there seems to be an issue with the plugin where selecting items does not fire validation.)

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

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

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

这篇关于jQuery的multiselect验证仅在双击时有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！