views:

2130

answers:

3

Hi,

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.

+2  A: 

Here is some CSS that will work:

.validation-summary-errors {
    background-color: #D9FFB2;
    border:1px solid #5CBA30;
    width: 400px;
    }
span.validation-summary-errors {
    border-bottom-color: #D9FFB2;
    display:block;
    }
ul.validation-summary-errors {
    margin:0;
    padding:0;
    border-top:none;
    }

You may have to play around with the widths depending on your other css.

Edit after comment

I changed ul.validation-summary-errors to zero out the margin and padding and removed the width. It should work cross-browser now.

Emily
Almost :-)! This works fine in Firefox 3, but breaks in IE 7. See http://content.screencast.com/users/sandra123/folders/Jing/media/a8523c9c-dfc7-44a4-8461-05d0e159677c/2009-06-02_1928.png
Adrian Grigore
Did my new version of the code work? It should fix the list being pushed over in IE7.
Emily
A: 

If you had a wrapping div like the second code example you provided. Then it would be easy to use jQuery to "move" the error class from the span & ul to that outer div.

<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  <script type="text/javascript">
    $(function() {
      var className = "validation-summary-errors";
      $("." + className).removeClass(className).closest("div").addClass(className);
    });
  </script>
  <style type="text/css">
    .validation-summary-errors { border: solid 1px red; },
  </style>
</head>

<body>
  <div>
    <h2>My Modal Message</h2>
    <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>
  </div>
</body>
</html>

This code will manipulate the HTML to look like this...

  <div class="validation-summary-errors">
    <h2>My Modal Message</h2>
    <span class="">There were some errors...</span>
    <ul class="">
      <li>First Name too long</li>
      <li>Invalid Email Address</li>
    </ul>
  </div>
jessegavin
As I said, I know it's quite easy to solve this problem with jQuery. But this seems like a quite awkward solution.
Adrian Grigore
A: 

If I'm reading this right and you only want a border on the span.validation-summary-errors (and not on the inner contents) then:

.validation-summary-errors     {border: 0 none transparent; /* set defaults for inner */
                               }

span.validation-summary-errors {background-color:#D9FFB2;   /* sets the span */
                               border: 1px solid #5CBA30;
                               color:#000000;
                               margin-top:15px;
                               margin-bottom:15px;
                               }

should do it.

Or, slightly less reliably:

.validation-summary-errors     {background-color:#D9FFB2;
                               border: 1px solid #5CBA30;
                               color:#000000;
                               margin-top:15px;
                               margin-bottom:15px;
                               }

.validation-summary-errors > .validation-summary-errors,
.validation-summary-errors .validation-summary-errors
                               {border: 0 none transparent; /* should apply styles to */
                               }                            /* the children/descendants */
                                                            /* with the same name - untested though... */
David Thomas
No, I want a single border that surrounds both the validation summary and the messages.
Adrian Grigore