Question

很多人都在问类似的问题，但所有答案都是针对单个错误消息的，这个消息是内置在API中的。

.validate({
    groups: {
        birthday: "month day year"
    },

请检查此jsfiddle http://jsfiddle.net/atLV4/36/

如果您在未运行任何内容的情况下提交，则所有元素都会获得错误类。当您填写表单时，您只能更新一个元素，取消选择它，即使其他元素没有更新，错误消息也会消失。此外，一旦更新选择，边框就会消失，从而导致跳跃。我希望验证只在选择了所有3个输入后运行。

Answer 1

不幸的是，似乎jQuery Validate没有内置的onchange功能，这是您想要将其用于3个选择的地方。相反，您需要禁用onfocusout和onclick检查，然后为3个选项添加外部change事件，一旦所有3个选项都填满，就会触发验证。对于验证码，您需要：

   //save the validate object to use later!
    var $validate = $("#commentForm").validate({
        onfocusout: false,
        onclick: false,
        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);
            }
        }
    });

然后您还需要一个更改事件处理程序：

//I'm using generic selectors here, but you may need to specify the 3 of interest
$('select').change(function () {
    if ($('select:filled').length == 3) {
        $('select').each(function () {
            $validate.element(this);
        });
    }
});

$validate.element()是实际检查它们是否正在传递规则的函数，并相应地更新它们的边框和错误消息。检查$('select:filled')只是确认所有3个选择都有值的简写。

这里的工作示例：http://jsfiddle.net/atLV4/41/

jQuery使用多个输入进行验证

1 个答案: