Originally posted on: http://geekswithblogs.net/MightyZot/archive/2013/11/11/styling-asp.net-mvc-error-messages.aspxOff
the cuff, it may look like you’re stuck with
the presentation of your error messages (model errors) in ASP.NET MVC. That’s not
the case, though. You actually have quite a number of options with regard to styling those boogers. Like many of
the helpers in MVC,
the Html.ValidationMessageFor helper has multiple prototypes. One of those prototypes lets you pass a dictionary, or anonymous object, representing attribute values for
the resulting markup. @Html.ValidationMessageFor( m => Model.Whatever, null, new { @class = “my-error” }) By passing
the htmlAttributes parameter, which is
the last parameter in
the call to
the prototype of Html.ValidationMessageFor shown above, I can style
the resulting markup by associating styles to
the my-error css class. When you run your MVC project
and view
the source, you’ll notice that MVC adds
the class field-validation-valid or field-validation-error to a span created by
the helper. You could actually just style those classes instead of adding your own…it’s really up to you. Now, what if you wanted to move that error message around? Maybe you want to put that error message in a box or a callout. How do you do that? When I first started using MVC, it didn’t occur to me that
the Html.ValidationMessageFor helper just spits out a little bit of markup. I wanted to put
the error messages in boxes with white backgrounds, our site originally had a black background,
and show a little nib on
the side to make them look like callouts or conversation bubbles. Not realizing how much freedom there is in
the styling
and markup,
and after reading someone else’s post, I created my own version of
the ValidationMessageFor helper that took out
the span
and replaced it with divs. I styled
the divs to produce
the effect of a popup box
and had a lot of trouble with sizing
and such. That’s a really silly
and unnecessary way to solve this problem. If you want to move your error messages around, all you have to do is move
the helper. MVC doesn’t appear to care where you put it, which makes total sense when you think about it. Html.ValidationMessageFor is just spitting out a little markup using a little bit of reflection on
the name you’re passing it. All you’ve got to do to style it
the way you want it is to put it in whatever markup you desire. Take a look at this, for example… <div class=”my-anchor”>@Html.ValidationMessageFor( m => Model.Whatever )</div> @Html.TextBoxFor(m => Model.Whatever) Now, given that bit of HTML, consider
the following CSS… <style> .my-anchor { position:relative; } .field-validation-error { background-color:white; border-radius:4px; border: solid 1px #333; display: block; position: absolute; top:0; right:0; left:0; text-align:right; } </style>
The my-anchor class establishes an anchor for
the absolutely positioned error message. Now you can move
the error message wherever you want it relative to
the anchor. Using css3, there are some other tricks. For example, you can use
the :not(:empty) selector to select
the span
and apply styles based upon whether or not
the span has text in it. Keep it simple, though. Moving your elements around using absolute positioning may cause you issues on devices with screens smaller than your standard laptop or PC. While looking for something else recently, I saw someone asking how to style
the output for Html.ValidationSummary. Html.ValidationSummery is
the helper that will spit out a list of property errors, general model errors, or both. Html.ValidationSummary spits out fairly simple markup as well, so you can use
the techniques described above with it also.
The resulting markup is a <ul><li></li></ul> unordered list of error messages that carries
the class validation-summary-errors In
the forum question,
the user was asking how to hide
the error summary when there are no errors. Their errors were in a
red box
and they didn’t want to show an empty
red box when there aren’t any errors. Obviously, you can use
the css3 selectors to apply different styles to
the list when it’s empty
and when it’s not empty; however, that’s not support in all browsers. Well, it just so happens that
the unordered list carries
the style validation-summary-valid when
the list is empty. While
the div rendered by
the Html.ValidationSummary helper renders a visible div, containing one invisible listitem, you can always just style
the whole div with “display:none” when
the validation-summary-valid class is applied
and make it visible when
the validation-summary-errors class is applied. Or, if you don’t like that solution, which I like quite well, you can also check
the model state for errors with something like this… int errors = ViewData.ModelState.Sum(ms => ms.Value.Errors.Count); That’ll give you a count of
the errors that have been added to ModelState. You can check that
and conditionally include markup in your page if you want to.
The choice is yours. Obviously, doing most everything you can with styles increases
the flexibility of
the presentation of your solution, so I recommend going that route when you can. That picture of
the fat guy jumping has nothing to do with
the article. That’s just a picture of me on
the roof
and I thought it was funny. Doesn’t every post need a picture?
