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-01 14:17:14Z

27

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.

edited Aug 1, 2011 at 14:17

answered Aug 1, 2011 at 14:10

Chris Snowden

4,9921 gold badge27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vitalik Over a year ago

Perfect, i modified the built in css styles. Thanks

stack72 · Accepted Answer · 2011-08-01 14:11:26Z

-3

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>

answered Aug 1, 2011 at 14:11

stack72

8,3081 gold badge33 silver badges35 bronze badges

Collectives™ on Stack Overflow

ValidationSummary and ValidationMessageFor with custom CSS shown when no errors present

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related