ValidationSummary and ValidationMessageFor with custom CSS shown when no errors present

Tags: css,,validation

Problem :

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;

Solution :

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.

    CSS Howto..

    Image rotation in IE causes automatic translation. How do I remove the translation?

    How can I get Chrome to resize this div when the padding changes?

    My sidebar is going over the footer. How can I sort this out?

    How to keep div on one line and append ellipses

    How can I get --webkit-tap-highlight-color to highlight an entire DIV?

    how to reference background image urls in css through config entrys

    Using CSS approach how to set an image to fill a path in SVG?

    How-to set background-position-x?

    How to change fill color of SVG on click when it's used as a background image?

    How to place differently sized images in 2 columns with figcaption aligned

    How to change font size of the first option tag in a dropdown menu (select)?

    CSS Rotation and Styling - how to?

    How to display an HTML list non-nested?

    How to pause css animation?

    How to make menu to slide right on click using HTML and CSS?

    How to align with css

    How to set a CSS selector for links ( a Tag ) for a Class

    How to arrange/align two paragraphs into boxes [duplicate]

    How can I create a CSS selector to select when a link does not have a class of folder or start class starting with title?

    How to divide parent div's height between child divs

    How to add a background image inline style to link tag Rails

    How to combine jquery codes with similar functions?

    How to properly add margin to elements inside bxSlider

    How do I place the text on the image in the header?

    How to Set the Left and Top CSS Positioning of a DIV Element Dynamically Using JavaScript

    How to apply css background color to text only, in datatables cell

    How to make a space between tags (icons) in table?

    How to put a border around the text in a button?

    How to get two HTML section blocks align in CSS?

    How to make JS and CSS cacheable until changes? [closed]