3

我已经对两个输入字段进行了分组，因此无论有多少输入字段无效，它都只显示一条错误消息。

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

我想要的是只要一个或多个输入字段无效，错误消息就会一直存在。并防止在填写两个空输入字段之一时错误消息消失。

这是我的代码：

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。

谢谢！

4

1 回答 1

6

引用操作：

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

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

引用操作：

“我想要的是，只要一个或多个输入字段无效，错误消息就会一直存在。并防止在两个空输入字段之一被填写时错误消息消失。”

只要您使用该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/

于 2013-10-17T21:00:31.497 回答