如何在验证摘要中显示MVC 3客户端验证结果

Question

我有一个注册表单,我使用客户端验证(在我的视图模型上指定Required,StringLength等).表格目前几乎是脚手架创建它的方式:

@using (Html.BeginForm("Index", "Registration"))
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Registration details</legend>
        @Html.ValidationSummary(false, "Please correct these errors:")
        @Html.ValidationMessageFor(model => model.Username)
        <div class="editor-label">
            @Html.LabelFor(model => model.Username)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Username)
        </div>
        <p>
            <input type="submit" value="Register" />
        </p>
    </fieldset>
}

唯一的区别是我将ValidationMessageFor移动到ValidationSummary下面的右上角.

我想要做的是在验证摘要中显示客户端验证错误.目前,它们只显示在表单的顶部,但未使用验证摘要.如何使用验证摘要显示客户端验证错误？这甚至可能吗？

更新

Darin我在新项目中使用了你的代码,当客户端验证开始时,这就是我的样子:

客户端验证http://i56.tinypic.com/i3f320.jpg

我希望在验证摘要中显示这个,并应用验证摘要样式.我还提交了表格,然后看起来像这样:

提交http://i55.tinypic.com/2hqcowh.jpg后

谢谢,

B3N

Answer 1

本文似乎解释了如何将客户端验证摘要添加到验证摘要中:

http://geekswithblogs.net/stun/archive/2011/01/28/aspnet-mvc-3-client-side-validation-summary-with-jquery-validation-unobtrusive-javascript.aspx

但是我没有自己测试它,它似乎与你的代码没有任何区别.如果它不起作用,看起来可能是jquery.validate.unobtrusive.js文件在一个实际放置验证错误的函数上:

function onErrors(form, validator) {  // 'this' is the form element
    var container = $(this).find("[data-valmsg-summary=true]"),
        list = container.find("ul");

    if (list && list.length && validator.errorList.length) {
        list.empty();
        container.addClass("validation-summary-errors")
          .removeClass("validation-summary-valid");

        $.each(validator.errorList, function () {
            $("<li />").html(this.message).appendTo(list);
        });
    }
}

Answer 2

我在我的项目中解决了这个问题.

1. 在配置文件中添加以下键

<add key="ClientValidationEnabled" value="true"/>

1. 在html页面中添加以下代码,以显示验证摘要

   @Html.ValidationSummary(false)

2. 从视图中删除所有@ Html.ValidationFor行.

Answer 3

默认情况下，验证错误消息通常显示为验证摘要的一部分。ValidationFor 通常应该与导致验证错误的控件一起放置，以便明确哪个控件需要更新