自定義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/