如何将 jquery.Validate 与 jquery.multiselect 下拉菜单一起使用？

Question

所以情况是这样的：尝试使用 jquery.multiselect< 添加下拉框当前使用 jquery.validate 插件的表单上的 /a> 插件有其他字段（文本输入字段、具有浮点值范围的单个文本输入）当前均已正确验证。

当我尝试添加验证规则时，我根本无法让 jquery.validate 来验证我的多选下拉列表。以下是我的代码片段（全部假设已加载所需插件 - 请参阅下文了解使用的版本）：

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>

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

版本 如果版本之间存在明显/已知的兼容性问题，那么如果可以解决问题，我可能会进行升级，但我已经出于我的目的使用最新版本进行了测试，但它似乎没有解决我的问题。

jQuery：1.4.4

jquery.validate：1.9.0

jquery.multiselect：1.8

并且，一如既往，我可以尽可能提供更多信息/需要。

Answer 1

因此，看来我为多选设置的规则确实附加到了选择，但是，由于原始选择框是 :hidden by jquery.multiselect， jquery.validate 默认情况下会忽略任何隐藏的输入。

解决方案（不是我自己的 - 同事发现的）是使用 jquery.validate 的 ignore 设置。无论使用 ignore 设置传入什么选择器，都会将其放入 jquery .not() 中，因此解决方案实际上是在这里使用双重否定：

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

唷！

Answer 2

在我看来，您的两个选择选项具有价值。

value="some_val1"

尝试在顶部添加一个值为空的选项并选择：

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

Answer 3

另一种可能的解决方案是显式指定要验证的元素：

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

这也将验证隐藏的选择。

事实上，我刚刚遇到的情况没有其他方法，因为我想对多步骤表单进行部分验证：

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

希望它对某人有帮助