使用jQuery验证多个输入框

Question

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

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

请查看这个jsfiddle链接：http://jsfiddle.net/atLV4/36/ 如果您在没有运行任何内容的情况下提交表单，所有元素都会得到错误类。填写表单时，您可以仅更新一个元素，取消选择它，即使其他元素还没有更新，错误消息也会消失。另外，边框会在您更新选择后立即消失，导致跳动。我希望只有当三个输入都已选择后才进行验证。

- Taylor Chance

---

可以包含HTML和JS吗？ - guest271314

我们希望能看到一些代码... - renakre

好问题！你能发布一段代码片段或JSFiddle吗？ - rickcnagy

需要每个“select”都有一个“value”来验证表单吗？如果三个“select”都没有值，则调用单个错误函数？ - guest271314

我刚刚编写了一个简单的自定义规则 - http://jsfiddle.net/atLV4/40/#update。这是你要找的吗？ - hutingung

Answer 1

很遗憾，jQuery Validate似乎没有内置的onchange函数，而这就是您想放置三个选择器的地方。 相反，您需要禁用onfocusout和onclick检查，然后添加一个外部的change事件，触发验证一旦所有三个被填充完毕。 对于您的验证代码，您需要这样做：

   //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') 只是简单地确认所有三个选择器都有值。

这里有一个工作示例：http://jsfiddle.net/atLV4/41/

- Ryley