ValidationSummary and ValidationMessageFor with custom CSS shown when no errors present

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,开发者_JS百科 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;
}

---

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.

---

We don't put a class of required on our ValidationMessagesFor helpers

<li>
                    <label for="NameFirst">First Name <span>* Required</span></label>
                    <span class="field-container">
                        @Html.TextBoxFor(m => m.FirstName, new { required = "required", data_type="name" })
                        @Html.ValidationMessageFor(m => m.FirstName)
                    </span>
                </li>