“实时”更新验证摘要答案

【问题标题】：Update validation summary in 'real time'“实时”更新验证摘要
【发布时间】：2012-11-09 05:36:58
【问题描述】：

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

我已添加验证摘要：

 @Html.ValidationSummary(false)

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

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

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

【问题讨论】：

"目前验证摘要中的消息仅在单击提交按钮时才会更改。"请创建一个小提琴/演示，以便我们了解发生了什么。
如果您向任何表单添加验证摘要，您应该会看到结果

标签： jquery asp.net-mvc asp.net-mvc-4 jquery-validate

【解决方案1】：

我已将验证摘要设置为“实时”更新，同时考虑以下几点：

仅在摘要可见时更新摘要（在页面验证/提交之后）
一切有效时清除摘要

让我们提取验证器，覆盖 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;
};

【讨论】：

工作得很好，只是当第一个错误发生时它不会再次显示摘要。我认为这可以算作一个答案，谢谢。
当然，如果您总是希望更新摘要，则可以排除 if ($('div[data-valmsg-summary=true] li:visible').length)。
但是，如果您希望更新在提交后启动并继续更新，即使一切都有效，我认为我们需要保持该状态。例如。 $('form').data('updateSummary', true);

【解决方案2】：

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

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

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

【讨论】：

或者更好的是，你可以在 $('form').on('change',function(e){ $(this).valid(); });
这不是比写一堆代码容易得多吗？那为什么选票少？

【解决方案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;
}

【讨论】：