title: Surrounding a ValidationSummary with a box via CSS
body: <p>By default Html.ValidationSummary() produces HTML like this:</p>
  
  <pre><code>&lt;span class="validation-summary-errors"&gt;There were some errors...&lt;/span&gt;
  &lt;ul class="validation-summary-errors"&gt;
     &lt;li&gt;First Name too long&lt;/li&gt;
     &lt;li&gt;Invalid Email Address&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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: </p>
  
  <pre><code>.validation-summary-errors{
  background-color:#D9FFB2;
  border: 1px solid #5CBA30;
  color:#000000;
  margin-top:15px;
  margin-bottom:15px;
  }
  </code></pre>
  
  <p>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. </p>
  
  <p>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: </p>
  
  <pre><code>  &lt;div class="my-validation-summary"&gt;
          &lt;h2&gt;
              &lt;%=Model.Message%&gt;
          &lt;/h2&gt;
          &lt;%= Html.ValidationSummary("There were some errors...")%&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I can think of several ways to solve this:</p>
  
  <ul>
  <li>Add a bounding div conditionally with server-side tags</li>
  <li>Add a bounding div via jQuery</li>
  <li>Write my own HtmlHelper wrapper that prints a CSS-friendly ValidationSummary</li>
  </ul>
  
  <p>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?</p>
  
  <p><strong>Edit:</strong> Just to clarify, I am calling the html helper like this: </p>
  
  <pre><code>&lt;%=Html.ValidationSummary("There were some errors...") %&gt;
  </code></pre>
  
  <p><strong>Edit 2:</strong> 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. </p>