Surrounding a ValidationSummary with a box via CSS

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.

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.

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"></script>
  <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>

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... */

Another and needed solution.

@Html.ValidationSummary(false, "", new { @class = "***YOUR CSS CLASS***" })

来源：https://stackoverflow.com/questions/940335/surrounding-a-validationsummary-with-a-box-via-css

标签

jquery

asp.net-mvc

css

validation

html-helper