15

我有一个注册表单，我在上面使用客户端验证（在我的视图模型上指定的必需、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://tinypic.com/images/404.gif

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

提交后

谢谢，

b3n

4

6 回答 6

8

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

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);
        });
    }
}
于 2011-05-21T13:35:53.317 回答
6

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

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

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

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

    @Html.ValidationSummary(false)

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

于 2012-12-22T23:29:52.680 回答
4

从我在您的示例代码中可以看到，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" />
}
于 2011-03-01T07:20:49.363 回答
4

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

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

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

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

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

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

享受！

于 2012-12-05T21:37:50.527 回答
1

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

于 2011-03-01T04:41:00.070 回答
0

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

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

我希望它也对你有用。

于 2014-04-23T13:49:15.573 回答