How to Use jquery.Validate with a jquery.multiselect Dropdown?

问题

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.

回答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!

回答2:

Looks to me like your two select options carry a value.

value="some_val1"

Try adding an option at the top with a value of nothing and selected:

<option selected="" value="">Please Select Something</option>

回答3:

Another possible solution is to explicitly specify the elements to validate:

$("form").children("input, select, textarea").valid()

That will validate the hidden select as well.

In fact, the situation I just encountered there was no other way since I wanted to validate by part for a multistep form:

 $("form").find("[data-stepIndex='1']").children("input, select, textarea").valid()

Hope it helps someone

来源：https://stackoverflow.com/questions/8539430/how-to-use-jquery-validate-with-a-jquery-multiselect-dropdown

标签

jquery

jquery-validate

multi-select