自定义validationSummary HTML帮手不工作在客户端

Question

我正在一个mvc3应用程序，我需要修改ValidatioSummary消息的样式，为此，我创建了我自己的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.unobtrusive.js文件中做任何更改以应用这些更改？或者我需要在jQuery中创建另一个验证文件？我在jquery中的经验非常差，现在我很失落，任何帮助你都可以给我，请大家非常感激。

非常感谢！

Answer 1

迟到的回答： 的jquery.validate.unobtrusive.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); 
     }); 
    } 
}); 

Answer 2

你应该看看这个教程的末尾：

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