jquery - “实时”更新验证摘要

Question

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

我添加了一个验证摘要：

 @Html.ValidationSummary(false)

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

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

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

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（准备就绪）：

$('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;
};

Answer 2

客户端摘要似乎是在验证整个表单时生成的，您可以通过调用 valid() 插件方法自己执行此操作。在 jquery 验证脚本之后添加它。

<script>
    $(function () {
        $(':input').on("keyup click", function () {
            $('form').valid();
        });
    });
</script>

我包含的示例事件是 keyup 和 click，但您可以添加到此空格分隔列表中或从中删除。

Answer 3

Javascript：

function resetValidationSummary() {
    var form = $('#myForm');

    var validator = form.validate();
    validator.resetForm();

    if (form.valid()) {
        $('.validation-summary-errors').addClass('validation-summary-valid');
        $('.validation-summary-errors').removeClass('validation-summary-errors');
    }
}

CSS：

.validation-summary-valid {
    display: none;
}