Question

所以情况是这样的：尝试在当前使用具有其他字段的jquery.multiselect插件的表单上使用jquery.validate插件添加下拉框（文本输入字段，单个文本输入，所有目前正确验证的float值范围。

当我尝试添加验证规则时，我根本无法获得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 jquery.multiselect，jquery.validate默认忽略任何隐藏的输入。

解决方案（不是我自己的 - 同事找到它）是使用ignore的{{1}}设置。无论使用jquery.validate设置传入什么选择器都放入jquery ignore，所以解决方案实际上是在这里使用双重否定：

.not()

呼！

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

希望它有助于某人

如何在jquery.multiselect下拉列表中使用jquery.Validate？

3 个答案: