jquery - 使用 jQuery 验证插件验证多个选择框

Question

所以我在使用 jQuery Validation Plugin 时遇到了一些问题。我有 3 个彼此相邻的选择标签，因此用户可以输入他们的生日。如何为 3 个选择标签提供 1 条验证消息？我听说也许可以做一个自定义规则？

这是 HTML，我已经包含了一个 jsfiddle。

<form id="commentForm" action="" method="post">
<p>
    <label for="month">Birthday:</label>
    <select name="month" class="required select">
        <option value="">Month</option>
        <option>Jan</option>
        <option>Feb</option>
    </select>
    <select name="day" class="required select">
        <option value="">Day</option>
        <option>01</option>
        <option>02</option>
    </select>
    <select name="year" class="required select">
        <option value="">Year</option>
        <option>1990</option>
        <option>1991</option>
    </select>
</p>
<input type="submit" value="Sign Up" class="button">
</form>​

这是当前正在发生的事情的一个例子。

提前致谢。

Answer 1

您可以使用该group选项将字段组合在一起，以便为该组显示一条错误消息。然后，您可以使用以下errorPlacement选项将一条错误消息放置在您想要的位置：

$("#commentForm").validate({
    groups: {
        birthday: "month day year"
    },
    errorPlacement: function(error, element) {
        var name = element.prop("name");
        if (name === "month" || name === "day" || name === "year") {
            error.insertAfter("select[name='year']");
        } else {
            error.insertAfter(element);
        }
    }
});

示例：http: //jsfiddle.net/atLV4/3/