Everyday Coder

Surrounding a ValidationSummary with a box via CSS

2012-01-01T23:41:00.001+08:00

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.

Everyday Coder

Surrounding a ValidationSummary with a box via CSS

ASP.NET MVC 3 Good Looking jQuery Validation

How data annotations for ASP.NET MVC validation work

What are data annotations?

Applying data annotations to the model.

System.Data.Services.Client.DataServiceResponse 204 when deleting an entity

How to get most out of Windows Azure Tables

Introduction

Table Data Model

ASP MVC – Delete confirmation with Ajax & jQuery UI Dialog

Our Objective

Requirements

Approach

1. Modify the repeater.

How to use Moq to mock a MembershipUser?

Validating with a Service Layer (C#)

Separating Concerns

MVC 3 and Remote Validation

How to: Implement Remote Validation in ASP.NET MVC

Creating the Starter Project

ASP.NET MVC Service vs Repository

Class-Level Model Validation with EF Code First and ASP.NET MVC 3

Class-Level Model Validation using IValidatableObject

Implementing the Repository and Unit of Work Patterns in an ASP.NET MVC Application

Modal popup search window to replace dropdown control ASP.NET

asp.net mvc azure “Error accessing the data store!”

Agile Project Management for Everybody

How to localize a DropDownList and to keep a selected item?

Using ELMAH in Windows Azure with Table Storage

ASP.NET MVC 3 Internationalization

Introduction

Localization in ASP.NET MVC – 3 Days Investigation, 1 Day Job

Localization supported by ASP.NET MVC

ASP.NET MVC : Injecting & Mocking an IRepository

Official Ninject MVC extension gets support for MVC3

Azure TableStorageMembershipProvider does not work with hashed passwords, cannot login

How to Unit Test Code that uses AppSettings from Web.config

MVC 3 + Ninject + Moq + Unit Test Step By Step

TDD with ASP.NET MVC 3, Moq and Dependency Injection

TDD and Dependency Injection with ASP.NET MVC

Start Me Up! with apologies to The Rolling Stones

How to Unit Test ASP.NET MVC Controllers

Unit tests to check an ASP.NET MVC controller returns the correct view

How to Add MVC 3.01 Project Types to the Azure Cloud Service Wizard

Step 0: Get the templates

Simple Toggle with CSS & jQuery

Step1. Wireframe & Style

asp.net mvc disable browser cache