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

Question

我有一个注册表单，我在该注册表单上使用客户端验证（在我的视图模型上指定的必需、字符串长度等）。该表单目前几乎是脚手架创建它的方式：

@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 我在一个新项目中使用了你的代码，当客户端验证启动时，这对我来说是这样的：

Client side validation http://tinypic.com/images/404.gif

我希望这会显示在应用了验证摘要样式的验证摘要中。我还提交了如下表格：

谢谢，

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

从我在您的示例代码中可以看到，您的表单中有两个Html.ValidationSummary。第一个以true 作为参数，这意味着它排除了所有属性错误。第二个采用false，适用于客户端和服务器端验证错误。示例：

型号：

public class MyViewModel
{
    [Required]
    [StringLength(5)]
    public string Username { get; set; }

    [Required]
    public string Name { get; set; }
}

控制器：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

查看：

@model AppName.Models.MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>

@using (Html.BeginForm())
{
    @Html.ValidationSummary(false, "Please correct these errors:")

    @Html.ValidationMessageFor(model => model.Username)
    @Html.ValidationMessageFor(model => model.Name)

    @Html.LabelFor(model => model.Username)
    @Html.EditorFor(model => model.Username)

    @Html.LabelFor(model => model.Name)
    @Html.EditorFor(model => model.Name)

    <input type="submit" value="Register" />
}

Answer 4

经过2天的深入研究，我已经解决了这个问题，最后，我自己和我的实验找到了答案！

要在验证器摘要中显示客户端验证器消息，有 3 个简单的步骤：

1- 将 <add key="ClientValidationEnabled" value="false" /> 放入 web.config 的 <appSettings> 部分

2- 在您的视图中添加您的验证“false”属性：@Html.ValidationSummary(false)

3- 删除您视图中的所有ValidationMessageFor(x => x.Property)。

当您单击提交按钮时，客户端验证消息将显示在您的验证摘要中。

享受吧！

Answer 5

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

Answer 6

我也有同样的问题。我通过确保我的页面中包含以下脚本来修复它：

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")

我希望它也对你有用。