Customise Validation summary

Question

I have used html.ValidationSummary to get all errors displayed on top of the page. This will render list with errors on top of the page.

Example:

<ul>
<li>UserName is invalid</li>
</ul>

I have how ever need to render every item instead of list as custom div with additional html tags inside.

I need every line to be rendered as short example below (this is only one line):

<div>
<div class="right"><a href="#closeError">Close error</div>
<div class="right"><a href="#Update">Update Field</div>
<label>Error:</label> Name on the page is invalid.
</div>

What is your opininon how to achieve this rendering? I have considered to create html helper where i will take ModelState and get all errors, but not sure this will work...

Maybe it's what are you looking for http://stackoverflow.com/questions/918969/how-to-extend-the-validationsummary-html-helper-in-asp-net-mvc — Tomasz Jaskuλa, Jun 20 '11 at 09:21
How ever this will just rap it all up in div, but i need every item rendered as this line — cpoDesign, Jun 20 '11 at 09:31
I think you should use some CSS to customize it. Looking how the helper is baked in the code there is no easy way of doing it. You can for example change validationsummary into the span and do even more customization (.validation-summary-errors > span { margin: 0px; } ) — Tomasz Jaskuλa, Jun 20 '11 at 09:43
using css i cannot add additional rendering , i know i can use javascript (jquery) but i need just plain html — cpoDesign, Jun 20 '11 at 10:09

score 2 · Accepted Answer · answered Jun 21 '11 at 06:15

I have considered to create html helper where i will take ModelState and get all errors, but not sure this will work...

Why wouldn't that work?

public static class ValidationExtensions
{
    public static IHtmlString MyValidationSummary(this HtmlHelper htmlHelper)
    {
        var formContext = htmlHelper.ViewContext.ClientValidationEnabled 
            ? htmlHelper.ViewContext.FormContext 
            : null;
        if (formContext == null && htmlHelper.ViewData.ModelState.IsValid)
        {
            return null;
        }

        var sb = new StringBuilder();
        var htmlSummary = new TagBuilder("div");
        var modelStates = htmlHelper.ViewData.ModelState.Values;
        sb.AppendLine("<div class=\"right\"><a href=\"#closeError\">Close error</div>");
        sb.AppendLine("<div class=\"right\"><a href=\"#Update\">Update Field</div>");

        if (modelStates != null)
        {
            foreach (ModelState modelState in modelStates)
            {
                foreach (ModelError modelError in modelState.Errors)
                {
                    var userErrorMessageOrDefault = GetUserErrorMessageOrDefault(modelError);
                    if (!string.IsNullOrEmpty(userErrorMessageOrDefault))
                    {
                        sb.AppendFormat("<label>Error:</label> {0}{1}", htmlHelper.Encode(userErrorMessageOrDefault), Environment.NewLine);
                    }
                }
            }
        }

        htmlSummary.InnerHtml = sb.ToString();
        if (formContext != null)
        {
            formContext.ReplaceValidationSummary = true;
        }
        return MvcHtmlString.Create(htmlSummary.ToString(TagRenderMode.Normal));
    }

    private static string GetUserErrorMessageOrDefault(ModelError error)
    {
        if (!string.IsNullOrEmpty(error.ErrorMessage))
        {
            return error.ErrorMessage;
        }
        return null;
    }
}

and then:

<%= Html.MyValidationSummary() %>

It did not work in my case to be honest, I copied and pasted the code to extension and called it in view. it only shows Close Error and Update anchors. I would expect to see all validation errors inside the div, but did not see it. am I missing something? — AnarchistGeek, Jan 13 '12 at 15:26
@AnarchistGeek, how are you adding the validation errors to the modelstate? — Darin Dimitrov, Jan 13 '12 at 15:28
Darin, let me ask a stupid question.. I define my validation rules in my model and, what I assumed model state already has the validations errors. I could perfectly be wrong. is that a wrong assumption?Cheers — AnarchistGeek, Jan 13 '12 at 15:40
@AnarchistGeek, the fact that you have defined validation rules on your model doesn't mean that you will get validation errors into the model state. You will first need to have a controller action that will be used to process the form submit and which will use the view model as action argument. It is then the default model binder when it attempts to bind the action argument from the request that will use the data annotations you have used to add errors into the modelstate. — Darin Dimitrov, Jan 14 '12 at 11:26

Customise Validation summary

1 Answers1