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;
}

Chris Snowden · Accepted Answer · 2011-08-01T14:17:14.033

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.

Perfect, i modified the built in css styles. Thanks – Vitalik Aug 01 '11 at 14:14 — Vitalik, Aug 01 '11 at 14:14

score -3 · Answer 2 · answered Aug 01 '11 at 14:11

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>

ValidationSummary and ValidationMessageFor with custom CSS shown when no errors present

2 Answers2

Linked