asp.net mvc3 jquery 방해하지 않는 요소 아래에 유효성 검사 메시지 표시

Question

요소 아래에 유효성 검사 메시지를 표시해야합니다.

[Required(ErrorMessage = "<br /> UserName is required")] 
public string UserName { get; set; } 

그러나 상기 요구 메시지 (검증 메시지 인코딩 임)으로 표현된다 :

내가 좋아하는 메시지를 추가하는 시도

<input type="text" value="" tabindex="1" style="height:auto; width:280px;" size="40" name="UserName" maxlength="15" id="UserName" data-val-required="&amp;lt;br /&amp;gt; UserName is required" data-val="true" class="textfield"> 

나는 경우 모델의 메시지에서 <br/>을 제거하면 유효성 확인 메시지가 두 줄로 표시됩니다. 또한 내가 아래 유효성 검사를 추가하는 시도했지만, 유효성 검사 메시지가 아래의 validate 메소드에서와 같이 오버라이드 (override)되어 있지 않은 경우 ("사용자 이름을 입력"을 "사용자 이름이 필요합니다"에서 무시) :

$('#userSignInform').validate({ 
    rules: 
     { 
      UserName: { required: true }, 
      Password: { required: true } 
     }, 
    messages: 
     { 
      UserName: { required: "Enter Username" }, 
      Password: { required: "Enter the Password" } 
     }, 
    errorPlacement: function (error, element) 
     { 
      error.appendTo(element.parent("td").next("td")); 
     } 
}); 

을 해결이 필요 뭐죠 요소 아래에 유효성 검사 메시지를 표시하고 모델 메시지를 jquery 유효성 검사 메서드로 재정의하려면 어떻게해야합니까?

<span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true"> 
    <span for="UserName" generated="true" class="">UserName is required</span> 
</span> 

보시다시피,이 클래스 field-validation-error를 가지고 :로

Answer 1

확인 메시지 마크 업이 생성됩니다. 새 줄에 유효성 검사 메시지를 표시하려면 간단한 CSS를 추가하십시오.

.field-validation-error { 
    display: block; 
} 

두 번째 줄에는 유효성 검사 메시지가 표시됩니다.

이 게재 위치를 특정 메일에만 적용하려면 클래스 선택기를 더 구체적으로 변경하면됩니다.

Answer 2

그냥 <br/>을 html로 추가하십시오.

예 :

@Html.LabelFor(m => m.UserName, "User Name 1") 
@Html.TextBoxFor(m => m.UserName)<br /> 
@Html.ValidationMessageFor(m => m.UserName)