Question

我有一个注册表单，我使用客户端验证（在我的视图模型上指定必需，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我在新项目中使用了你的代码，当客户端验证开始时，这就是我的样子：

Client side validation http://i56.tinypic.com/i3f320.jpg

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

After submit 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

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

在配置文件中添加以下键

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

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

@Html.ValidationSummary(false)
从视图中删除所有@ 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”attribut：@Html.ValidationSummary(false)

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

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

享受！

Answer 5

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

Answer 6

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

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

我希望它能帮到你。

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

6 个答案: