ValidationSummary 및 ValidationMessageFor 오류가없는 경우에 사용자 정의 CSS가 표시됨

Question

오류가없는 경우에도 사용자 정의 CSS를 ValidationSummary 및 ValidationMessageFor에 적용한 후에는 페이지에 나타납니다. CSS에는 이미지가 있습니다.

오류가없는 경우 요약 및 오류를 숨기려면 어떻게해야합니까?

@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

이미 이들에 대한 CSS 유형에 내장되어 있습니다 : MVC3 프로젝트에 대한 기본 CSS 파일에

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

. 이는 ModelState에 Property에 대해 오류가 있거나 ValidationSummary에 오류가있는 경우에 적절히 표시됩니다. ModelState에 오류가없는 경우 display:none;에서 .field-validation-valid까지 오류를 숨 깁니다.

Answer 2

우리는 우리의 ValidationMessagesFor 헬퍼에 필요한

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