ValidationSummary and ValidationMessageFor with custom CSS shown when no errors present

Question

Once I applied custom CSS to ValidationSummary and ValidationMessageFor it appears on the page even when there are no errors. The CSS does have an image.

How do I hide the summary and errors when there are no errors?

@Html.ValidationSummary("", new { @class = "required" })
@Html.ValidationMessageFor(m => m.UserName, null, new { @class = "required" })


.required {
    background-image: url(/images/required.jpg);
    background-repeat: no-repeat;
    height: 33px;
    width: 386px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #1eb4ec;
    padding-top: 16px;
    padding-left: 54px;
    margin-left: 30px;
}

Answer 1

There are already built in css types for these:

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid {
    display: none;
}

in the default css file for MVC3 projects. These are shown appropriately based on if the ModelState has any errors for the Property specified or any at all for ValidationSummary. If no errors are present in the ModelState then the display:none; from .field-validation-valid will hide the errors.