jQuery 유효성 검사를 통해 서버 측 ASP .NET MVC 유효성 검사와 동일한 마크 업을 생성 할 수 있습니까?

Question

내가합니다 (validation plugin 포함) ASP .NET MVC 1.0 및 jQuery를 사용하여 웹 응용 프로그램을 개발하고 있어요. 전형적인 "편집 실체"에 대한 서버 측 마크 업보기 잘못된 데이터가 FIRSTNAME 필드에 게시

<label for="FirstName">FirstName:</label> 
<%= Html.TextBox("FirstName", Model.FirstName) %> 
<%= Html.ValidationMessage("FirstName") %> 

을 다음과 같다, 그 결과 HTML이 정확히 어떤

<label for="FirstName">FirstName:</label> 
<input type="text" value="" name="FirstName" id="FirstName" class="input-validation-error text"> 
<span class="field-validation-error">Please enter the first name.</span> 

무엇인지는 것 ASP .NET MVC를 즉시 사용할 수 있습니다.

jQuery를 사용하여 클라이언트 측 유효성 검사를 추가하고 있으며 정확히 동일한 방식으로 동작하려고합니다. 즉, 입력 컨트롤에 입력 유효성 검사 오류 클래스가 주어지고 클래스에 span이 추가됩니다. 오류 메시지를 표시하는 필드 유효성 검사 오류입니다. 내가 거의 다 해요

,하지만 아주. errorElement 옵션을 사용하면 유효성 검사기에서 레이블이 아닌 오류 메시지의 범위를 만듭니다. errorClass 옵션을 사용하면 입력 요소에 입력 유효성 검사 오류 클래스가 지정됩니다.

내가있어 문제는 오류 메시지 범위 또한이 입력 검증 오류의 종류를 얻을 수 있다는 것입니다, 그리고 그것이 현장 검증 오류를 갖고 싶어.

강조 표시 및 강조 표시 해제 기능을 사용하여이를 수정하려고 시도했지만 범위의 클래스가 엉망이 되 자마자 유효성 검사 자체가 중단되고 서버에 양식이 게시됩니다.

사람은 거기에 내가이 문제를 해결할 수있는 방법에 대한 아이디어를 가지고? 감사.

Answer 1

는 I 입력 및 에러 소자에인가되는 클래스 만지작 의해 야기 된 문제를 갖는 한 것 같습니다. 플러그인은 오류 메시지를 표시하거나 숨기려면 해당 클래스가있는 요소를 찾고 유효하지 않은 요소가 몇 개인 지 계산할 때도 찾습니다.

는 이러한 문제를 방지하기 위해, 나는 errorClass 사용을 중단 : '입력 검증 오류'라인 대린의 대답에 표시를하고, 그와 같은 기본 값을 떠났다. errorPlacement 함수에서 올바른 클래스를 오류 및 입력 요소에 첨부하고 메시지를 DOM의 올바른 위치에 삽입합니다. 이 모든 것이 이제는 효과가있는 것처럼 보입니다. JavaScript는 다음과 같습니다.

$('form').validate({ 
errorElement: 'span', 
errorPlacement: function(error, element) { 
    error.insertAfter(element); 
    error.addClass('field-validation-error'); 
    element.addClass('input-validation-error'); 
},   
rules: { 
    FirstName: { 
     required: true 
    } 
}, 
messages: { 
    FirstName: { 
     required: 'Please enter the first name.'  
    } 
} 

}); 그의 입력 대린에

감사합니다, 그것은 올바른 방향으로 절 지적한다.

Answer 2

를 체크 아웃 errorPlacement 콜백 :

$('form').validate({ 
    errorClass: 'input-validation-error', 
    errorElement: 'span', 
    errorPlacement: function(error, element) { 
     // Insert and manipulate the span element here: 
     error.insertAfter(element) 
      .removeClass('input-validation-error') 
      .addClass('field-validation-error'); 
    },   
    rules: { 
     FirstName: { 
      required: true 
     } 
    }, 
    messages: { 
     FirstName: { 
      required: 'Please enter the first name.'  
     } 
    } 
});