jquery - 更新 'real time'中的验证摘要

Question

您好，我正在使用带有客户端验证的 MVC4。这非常适合在字段旁边显示验证消息。

我添加了验证摘要:

 @Html.ValidationSummary(false)

这对客户端来说是有效的。但我希望它有不同的行为；目前，验证摘要中的消息仅在单击提交按钮时才会更改。我希望它们能够以与每个字段的验证消息类似的方式动态填充。

有人可以建议一种方法来实现这一目标吗？

任何有关触发摘要更新的信息都会很棒。

Answer 1

我已将验证摘要设置为“实时”更新，同时还考虑了以下因素:

1. 仅在摘要可见时更新摘要(页面验证/提交后)
2. 当一切有效时清除摘要

让我们提取验证器，重写 showErrors() 并实现我们的逻辑:

var validator = $('form').data('validator');
validator.settings.showErrors = function (map, errors) {
    this.defaultShowErrors();
    if ($('div[data-valmsg-summary=true] li:visible').length) {
        this.checkForm();
        if (this.errorList.length)
            $(this.currentForm).triggerHandler("invalid-form", [this]);
        else
            $(this.currentForm).resetSummary();
    }
}

由于我在整个网站上使用此解决方案，因此我创建了以下 init(onready):

$('form').each(function () {
    var validator = $(this).data('validator');
    if (validator) {
        validator.settings.showErrors = function (map, errors) {
            this.defaultShowErrors();
            if ($('div[data-valmsg-summary=true] li:visible').length) {
                this.checkForm();
                if (this.errorList.length)
                    $(this.currentForm).triggerHandler("invalid-form", [this]);
                else
                    $(this.currentForm).resetSummary();
            }
        };
    }
});

这是上面使用的resetSummary:

jQuery.fn.resetSummary = function () {
    var form = this.is('form') ? this : this.closest('form');
    form.find("[data-valmsg-summary=true]")
        .removeClass("validation-summary-errors")
        .addClass("validation-summary-valid")
        .find("ul")
        .empty();
    return this;
};