Question

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

我添加了验证摘要：

 @Html.ValidationSummary(false)

这是有效的，客户端'全部。我希望它表现得与众不同;目前，验证摘要中的消息仅在单击提交按钮时更改。我希望它们以与每个字段的验证消息类似的方式动态填充。

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

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

Answer 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（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;
};

Answer 2

当整个表单经过验证时，似乎会生成客户端摘要，您可以通过调用valid（）插件方法自行完成。在jquery验证脚本之后添加它。

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

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

“实时”更新验证摘要

2 个答案: