jQuery validate for multiselect works only on double click

Question

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 Fiddle

Here is the code.

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

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

Answer 1

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.

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

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

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();
});

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