Question

I am working on a mvc3 application and I need to modify the style of the ValidatioSummary message, to do so, I created my own HTM helper which is as follows:

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);
   }
  }
 }

This works perfect with server side validation, but I need to implement this style on the Client side validation as well, right now, the forms are displaying the validationSummary on the top of the page on client side but with the default MVC format, not the one I specified in my HTML helper, I’ve been doing a lot of research but unfortunately I haven’t had any luck, may I need to do any change in the jquery.validate.unobtrusive.js file to apply these changes? or do I need to create another validation file in jquery? My experience in jquery is very poor and I am very lost right now, any help you can give me please it’ll be really appreciated.

Many thanks!!!

Answer 1

Late answer:
The jquery.validate.unobtrusive.js is hard to hook in to. Instead of modifying the file (never ideal) try this:

Listen to the following event

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

And then then build your own summary:

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);
        });
    }
});