MVC3에서 클라이언트 유효성 검사가 true 일 때 렌더링되는 html의 차이

Question

새로운 MVC3 사이트를 만들고 있습니다. 클라이언트 측 유효성 검사는 Web.config의 활성화

<appSettings> 
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
</appSettings> 

시나리오 # 1 : 실패 (클라이언트 측) 이후에 생성 된 출력 HTML 유효성 검사 :

<span data-valmsg-replace="true" data-valmsg-for="UserName" class="field-validation-error"> 
    <span htmlfor="UserName" generated="true" class="">Please enter an email address</span> 
</span> 

주 가장 안쪽의 태그가 중첩 span 태그 a class = ""

시나리오 2 : 사용자 지정 서버 측 유효성 검사. 동일한 web.config 구성을 사용하여 사용자 정의 비즈니스 규칙을 확인하기 위해 서버에 유효성 검사를 추가했습니다. 유효성 검사가 실패하면 ModelState에 오류를 추가합니다. 한 span 태그가 생성 된

<span data-valmsg-replace="true" data-valmsg-for="UserName" class="field-validation-error">Please enter a valid email address</span> 

주, NOT 중첩 태그 :

html로이 같은 외모를 생성합니다.

생성 된 HTML에 2 가지 다른 최종 결과가 있기 때문에이 동작으로 인해 .field-validation-error 클래스의 스타일을 지정할 수 없으므로 CSS를 처리하는 데 어려움이 있습니다.

요약 : 클라이언트 쪽 유효성 검사는 단 하나의 span 태그를 생성하고 서버 쪽 유효성 검사는 2 개의 span 태그를 생성합니다.

질문 : 프레임 워크의 들여 쓰기 동작입니까, 아니면 제가 잘못하고 있습니까?

Answer 1

프레임 워크의 들여 쓰기 동작입니까, 아니면 제가 잘못 했나요?

잘못된 것은 아닙니다. 그것은 jquery.validate.unobtrusive.js 스크립트가 어떻게 작동하는지입니다. 따라서이 기능을 누락 된 기능, 불일치, 피타 (PITA)라고 부를 수 있습니다.

$.validator.setDefaults({ 
    // customize the way errors are shown 
    showErrors: function (errorMap, errorList) { 
     if (errorList.length < 1) { 
      // because we have customized the way errors are shown 
      // we need to clean them up if there aren't any 
      $('.field-validation-error', this.currentForm).hide().attr('class', 'field-validation-valid'); 
      $('.input-validation-error', this.currentForm).removeClass('input-validation-error'); 
      return; 
     } 
     $.each(errorList, function (index, error) { 
      // simply toggle the necessary classes to the corresponding span 
      // to make client validation generate the same markup as server 
      // side validation 
      var element = $(error.element); 
      element.attr('class', 'input-validation-error'); 
      element.next('span').show().text(error.message).attr('class', 'field-validation-error'); 
     }) 
    } 
}); 

Answer 2

당신은 항상 (스타일의 이유로) 서버 유효성 검사 실패 후 유효성 검사 메시지에 대한 중첩 된 스팬을 사용하려면, 당신에게 :

이 존재는 jquery validate plugin이 확장하고 우리가 원하는대로 우리가 그것을 조정할 수 있다고 말했다 다음을 수행 할 수 있습니다.

$(document).ready(function(){ 
    $('.field-validation-error').each(function(){ 
     $(this).html($('<span>').text($(this).text())); 
    }); 
});