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

I have a registration form on which I use client side validation (Required, StringLength etc. specified on my view model). The form is currently pretty much how the scaffolder creates it:

我有一个注册表单，我使用客户端验证（在我的视图模型上指定必需，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>
}

The only difference is that I moved the ValidationMessageFor to the top right beneath the ValidationSummary.

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

What I would like to do is display the client side validation errors in the validation summary. Currently they are just displayed on top of the form but not using the validation summary. How can I display client side validation errors using the validation summary? Is this even possible?

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

Update

更新

Darin I have used your code in a new project and this is what it looks like for me when the client side validation kicks in:

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

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

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

I expected this to be shown IN the validation summary with the validation summary styles applied. I also submitted the form which then look like this:

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

After submit http://i55.tinypic.com/2hqcowh.jpg

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

Thanks,

谢谢，

b3n

B3N

6 个解决方案

#1

This article seems to explain how add client side validation summary into the validation summary:

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

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

However I did not test it by myself and it does not seem to have any difference with your code. If it does not work a good point to look might be jquery.validate.unobtrusive.js file on a function that actually places validation errors:

但是我没有自己测试它，它似乎与你的代码没有任何区别。如果它不起作用，那么查看可能是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);
        });
    }
}

#2

I resolved the issue in my project.

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

add below key in configuration file
在配置文件中添加以下键

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

Add below code in html page where you want to display validation summary

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

@Html.ValidationSummary(false)

@ Html.ValidationSummary（假）
Remove all @Html.ValidationFor lines from the view.

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

#3

From what I can see in your sample code you have two Html.ValidationSummary inside the form. The first one takes true as argument meaning that it excludes all property errors. The second one takes false and works for both client side and server side validation errors. Example:

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

Model:

模型：

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

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

Controller:

控制器：

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

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

View:

视图：

@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" />
}

#4

i have solved this problem after 2 day of intense research, and finaly, i found the answer by myself and my experimentations !

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

To display the Client-side Validator message in the validator Summary there is 3 easy step :

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

1- put <add key="ClientValidationEnabled" value="false" /> in the <appSettings> section of your web.config

1-在web.config的部分中输入

2- add your validation the "false" attribut in your view : @Html.ValidationSummary(false)

2-在您的视图中添加验证“false”attribut：@ Html.ValidationSummary（false）

3- Remove all ValidationMessageFor(x => x.Property) in your view.

3-在视图中删除所有ValidationMessageFor（x => x.Property）。

when you,ll click in your submit button, the client-side Validation message will be displayed in your validation summary.

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

Enjoy!

请享用！

#5

The validation error messages are normally shown as part of the validation summary by default. The ValidationFor should normally go along side the control which causes the validation error in order to make it clear which control needs to be updated

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

#6

I had this same issue. I fixed it by making sure the following scripts were included in my page:

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

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

I hope it does the trick for you, too.

我希望它能帮到你。

#1