jQuery 验证 : Display group error message until all fields are correct

Question

我已将两个输入字段分组，以便无论有多少输入字段无效，它都只显示一条错误消息。

如果我将它们都留空并尝试提交表单，就会出现问题 - 一旦我在其中一个中输入任何内容，错误消息就会消失。如果我选择并取消选择空输入字段，它会重新出现。

我希望只要一个或多个输入字段无效，错误消息就会保留。并防止当两个空输入字段之一被填写时错误消息消失。

这是我的代码:

HTML

<form>
    <div>
        <label for="fname">First Name</label>
        <input name="fname" id="fname" class="required">
    </div>
    <div>
        <label for="lname">Last Name</label>
        <input name="lname" id="lname" class="required">
    </div>
    <input type="submit" />
</form>

Javascript

$("form").validate({
    groups: {
        name: 'fname lname'
    },

    errorPlacement: function (error, element) {
        if (element.attr('name') == 'fname' || element.attr('name') == 'lname')
            error.insertAfter('#lname');
    }
});

还有一个JSFiddle .

谢谢!

Answer 1

引用OP:

"My problem occurs if I leave both of them empty and try to submit the form - as soon as I enter anything into one of them the error message disappears. It reappears if I select and deselect the empty input field."

是的，您已将两条错误消息合并为一条。因此，一旦满足事件字段的条件，该消息就会清除。您不能让它也符合字段 #2 条件，而它需要准确地遵循字段 #1 条件...它只是一次处理一个。

引用OP:

"What I would like is for the error message to remain as long as one or more of the input fields is invalid. And prevent the error message from disappearing when one of the two empty input fields gets filled out."

只要您使用groups选项，它就会完全按照设计工作。

groups 选项是专门为某些方法设计的，例如 require_from_group，当您想要填充一组元素中的一个元素时，您不需要看到每个元素上都重复出现相同的消息。 groups 允许您对这组字段使用一条消息。 (这是一条消息对应单个条件的地方，但是，您试图使一条消息符合多个条件。)

也许您需要使用 showErrors 函数。

类似这样的东西(相应调整):

$("form").validate({
    showErrors: function (errorMap, errorList) {
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors:");
        this.defaultShowErrors();
    },
    errorPlacement: function () {
        return false; // <- kill default error labels
    }
});

演示:http://jsfiddle.net/wdDtR/

另一个版本经过调整，表现得更像您的原始版本:

$("form").validate({
    showErrors: function (errorMap, errorList) {
        $("#summary").html("field is required");
        if (this.numberOfInvalids() > 0) {
            $("#summary").show();
        } else {
            $("#summary").hide();
        }
    },
    errorPlacement: function () {
        return false; // <- kill default error labels
    }
});

演示:http://jsfiddle.net/wdDtR/3/