Question

So the situation is this: attempting to add a dropdown box using the jquery.multiselect plugin on a form that current uses the jquery.validate plugin that has other fields (text input fields, single text input that has a float value range) that all currently validate correctly.

When I attempt to add validation rules I simply cannot get jquery.validate to validate my multiselect dropdown whatsoever. Here are snippets of my code (all assumes that required plugins are loaded – see below for versions used):

The HTML:

<form action="some/action" id="myForm" method="POST">
    Input 1: <input type="text" value="" name="input1" maxlength="200" id="input1"><br/>
    Input 2: <input type="text" value="" name="input2" maxlength="100" id="input2"><br/>
    Input 3: <input type="text" value="" name="input3" maxlength="50" id="input3"><br/>
    Select: <select class="someSelect" name="mySelect" id="mySelect" multiple="multiple">
        <option value="some_val1">Some Value</option>
        <option value="some_val2">Some Other Value</option>
    </select>
    <input type="submit" value="Submit" />
</form>

The Javascript:

$(document).ready(function() {
    $('#mySelect').multiselect({
        noneSelectedText: 'Select Something (required)',
        selectedList: 3,
        classes: 'my-select'
    });

    $.validator.addMethod("needsSelection", function(value, element) {
        return $(element).multiselect("getChecked").length > 0;
    });

    $.validator.addMethod("isPercent", function(value, element) {
        return parseFloat(value) >= 0 && parseFloat(value) <= 100;
    });

    $.validator.messages.needsSelection = 'You gotta pick something.';
    $.validator.messages.isPercent = 'Must be between 0% and 100%';

    $('#myForm').validate({
        rules: {
            mySelect: "required needsSelection",
            input1: "required isPercent",
            input2: "required",
            input3: "required"
        },
        errorClass: 'invalid'
    });
});

Versions
If there’s an explicit/known issue with compatibility between the versions, then I may upgrade if that solves the issue, but I’ve tested using the newest versions for my purposes and it did not seem to solve my issue.

jQuery: 1.4.4

jquery.validate: 1.9.0

jquery.multiselect: 1.8

And, as always, I can provide more information where possible/needed.

Answer 1

So it seems that the rules I was setting up for the multiselect were indeed being attached to the select, however, since the original select box is :hidden by jquery.multiselect, jquery.validate by default ignores any hidden inputs.

The solution (which is not of my own – a coworker found it) is to use the ignore settings for jquery.validate. Whatever selector is passed in with the ignore setting is put into a jquery .not(), so the solution is actually to use a double negative here:

$('#myForm').validate({
    rules: {
        mySelect: "required needsSelection",
        input1: "required isPercent",
        input2: "required",
        input3: "required"
    },
    ignore: ':hidden:not("#mySelect")', //Tells it to check the hidden select
    errorClass: 'invalid'
});

Phew!