By default Html.ValidationSummary() produces HTML like this:
<span class="validation-summary-errors">There were some errors...</span>
<ul class="validation-summary-errors">
<li>First Name too long</li>
<li>Invalid Email Address</li>
</ul>
I'd like to select the entire validation summary and add a bounding box around it via CSS, so I am adding a CSS class like this:
.validation-summary-errors{
background-color:#D9FFB2;
border: 1px solid #5CBA30;
color:#000000;
margin-top:15px;
margin-bottom:15px;
}
Now the problem is that this draws separate boxes around the validation summary message and each error message. Certainly not what I had in mind.
I can add a div around the summary like this, but this will result in an empty red box if there are no validation errors, so this is not the way:
<div class="my-validation-summary">
<h2>
<%=Model.Message%>
</h2>
<%= Html.ValidationSummary("There were some errors...")%>
</div>
I can think of several ways to solve this:
- Add a bounding div conditionally with server-side tags
- Add a bounding div via jQuery
- Write my own HtmlHelper wrapper that prints a CSS-friendly ValidationSummary
However, all of this looks quite awkward for solving such a simple task. There must be a better way to do this. Perhaps some other way of writing the CSS class so I don't get an empty box when there is no validation summary?
Edit: Just to clarify, I am calling the html helper like this:
<%=Html.ValidationSummary("There were some errors...") %>
Edit 2: The scope of this question was to see whether I have overlooked something dead-easy and obvious. It seems I haven't, so I'll simply add my own HtmlHelper function that fits my needs. I am voting to close my own question.
