javascript - jQuery 验证多个输入

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/