自定义验证摘要HTML帮助程序没有'不在客户端工作

customized validationSummary HTML helper doesn't work on Client side

本文关键字：工作 客户端 验证 HTML 帮助程序 自定义      更新时间：2023-09-26

我正在开发一个mvc3应用程序，我需要修改ValidationSummary消息的样式，为此，我创建了自己的HTM助手，如下所示：

public static MvcHtmlString MyValidationSummary(this HtmlHelper helper){
    string retainHtml +="";
    int counterror = 0;
    if (helper.ViewData.ModelState..IsValid)
    {
       TagBuilder tag = new TagBuilder("div");
       tag.Attributes.Add("class", "validation-summary-valid");
       tag.Attributes.Add("data-valmsg-summary", "true");
       tag.InnerHtml += "<span> There was" + countererror + "errors found<ul><li></li></ul>"
       retainHtml += tag.ToString();
    
       return MvcHtmlString.Create(retainHtml);
    }
    if (!helper.ViewData.ModelState.IsValid)
    {
       TagBuilder tag = new TagBuilder("div");
       tag.Attributes.Add("class", "validation-summary-errors");
       tag.Attributes.Add("data-valmsg-summary", "true");
       retainHtml +="<div class='validation-summary-errors'><span>";   
       counterror = 1;
       string temretainhtml ="";
       foreach (var key in helper.ViewData.ModelState.keys)
       }
           foreach (var err in helper.ViewData.ModelState[key].Errors)
               temretainhtml += "<li>Error  " + countererror++ + "  :  "  + err.ErrorMessage + "</li>";
       }
      
       retainHtml += "Error ! there was " + --countererror  + " errors found";
       retainHtml += "</span>";
       retainHtml += "<ul>";
       retainHtml += temretainhtml;
       retainHtml += "</ul></div>";
       }
    return MvcHtmlString.Create(retainHtml);
   }
  }
 }

这与服务器端验证非常配合，但我也需要在客户端验证上实现这种风格，现在，表单在客户端页面的顶部显示validationSummary，但使用默认的MVC格式，而不是我在HTML助手中指定的格式，我是否需要对jquery.validate.uno唐突.js文件进行任何更改以应用这些更改？还是我需要在jquery中创建另一个验证文件？我在jquery的经验很差，我现在很失落，如果你能给我任何帮助，我将不胜感激。

非常感谢！！！

延迟回答：jquery.validate.uno唐突.js很难挂接。与其修改文件（从来都不理想），不如试试这个：

收听以下事件

form.bind("invalid-form.validate", handler...

然后构建自己的摘要：

form.bind("invalid-form.validate", function (evt, validator) {
    var container = $(this).find("[data-valmsg-summary=true]");
    var 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 style='color:#00aa00'/>").html(this.message).appendTo(list);
        });
    }
});

您应该看看本教程的末尾：

http://thepursuitofalife.com/asp-net-mvc-3-unobtrusive-javascript-validation-with-custom-validators/

相关文章：