ASP.NET MVC3 Ajax 양식 게시를 방해하지 않는 사용자 정의 된 방해가되지 않는 클라이언트 측 유효성 검사

Question

보내는 "JavaScript를 통해 페이지에 입력 된 암호를 해시해야하는"암호 변경 페이지가 있습니다. 복잡하게하기 위해 페이지는 jQuery load() 호출을 통해로드되고 jQuery.Form ajaxForm() 호출에 의해 제출됩니다. MVC2에서 작동하는 모든 것이 있었지만 MVC3이 문제를 일으켰습니다.

즉, "비밀번호 변경"링크가있는 페이지를 클릭하면 비밀번호 변경 페이지가 jQuery 모달 팝업으로로드되고 비밀번호 변경 페이지의 양식이 jQuery.Form 라이브러리를 통해 제출됩니다 (본질적으로 단지 $ .ajax 호출을 감싸고), 그 결과를 모달 같은 모달 팝업으로 리턴합니다.

기본적으로 OldPassword와 NewPassword의 두 가지 속성을 가진 모델이 있습니다. 나는 이것들을보기 위해 두 개의 숨겨진 필드를 생성했습니다. 그들은 두 개의 다른 필드 인 PrehashOldPassword와 PrehashNewPassword의 해쉬 된 값을 유지하고 keyup 이벤트를 통해 업데이트를 얻습니다. (이것은 모든 키 업에서 전체 SHA256 해시를 의미합니다. 비효율적이지만 테스트를 위해 작업을 완료했습니다.) 여기서 핵심은 정규 표현식 유효성 검사와 필수 필드 유효성 검사가 클라이언트 측에만 존재하는이 Prehash 필드에서 실행되어야한다는 것입니다 (분명히 어떤 식 으로든이 필드를 서버로 전송하지 않으려 함).

그래서 수동으로이 두 가지를 만들고 data-val- * 속성을 요소에 추가합니다. 즉, MVC 도우미 등에 의해 생성되지 않습니다. 즉, 누락 된 부분이있는 것 같습니다. 양식이 모든 필드가 비어있는 상태로 제출되면 모든 오류가 팝업되지만 양식은 바로 진행되어 어쨌든 제출됩니다. 내가 해봤

==

그래서 일 :

예, 눈에 거슬리지 라이브러리 구문 분석() 메소드 이미 년대 AJAX로드 형태의 콘텐츠를 구문 분석하기 위해 호출 얻는다면, 모두를 얻을 것으로 보인다 데이터 유효성 검사 물건을 올바르게, 내가 볼 때 오류가 필드 blur()로 표시되고, 내가 아약스 요청이 완료되고 팝업의 내용을 대체하기 전에 제출을 누르십시오.

Possible note : AJAX 양식 제출 바인딩이로드 된 컨텐츠, ergo AJAX 폼 제출 바인딩은 바인딩 메소드에 바인딩되기 전에 바인딩 메소드를 호출 할 수 있습니다 (예 : parse 메소드가 제출 이벤트에 바인딩 할 수있는 유효성 검사 호출) ...

그러나 (1) 다른 유형과 동일한 일을하고 있습니다. 문제가없는 곳, 수동으로 만드는 요소에이 data-val- * 특성을 수동으로 넣는 것만 다릅니다. 그리고 (2), OldPassword 또는 NewPassword 필드에 어떤 종류의 오류가 발생하면 (즉, 값을로드하지 않아야하는 필수 필드 유효성 검사 오류) 오류가 표시되고 양식이 jQuery.Form을 통해 제출되지 않게됩니다. 방법.

그래서 내가 뭔가 잘못 여기 수 있다고 생각 :

<input id="PrehashNewPassword" type="password" name="PrehashNewPassword" data-val-required="The password field is required." data-val-regex-pattern="<%= RegexHelper.PasswordRegularExpression %>" data-val-regex="<%= RegexHelper.PasswordRegularExpressionError %>" data-val="true" /> 

내가 오류를 참조 않기 때문에 그 jquery.validate이 바로 규칙을 받고있다 알고있다. 그냥이 수동으로 생성 된 요소에 오류가있는 경우 제출에서 양식을 중지 아니에요, 양식의 AJAX 제출에 사전 제출 콜백을 추가 나는 이런 식으로 뭔가를 않고,하지 않는 :

 $("#ChangePasswordForm").ajaxForm({ 
      beforeSubmit: function() { if (!$('#ChangePasswordForm').valid()) { return false; } }, 
      target: '#overlay' 
     }); 

을이 작동하지만, 그것은보기 흉한 일종의 것이고 나는 그것이 유효성 검사를 두 번 호출하게한다고 믿습니다 ... 거대한 거래는 아니지만 이상적인 것보다 적습니다. 그렇다면 이들을 묶기 위해 눈에 잘 띄지 않는 라이브러리에 필요한 다른 호출이 있습니까?

Answer 1

확실하지 않음 당신은 사용을 시도 할 수 있습니다 :

$.validator.unobtrusive.parse($("#dynamicData")); 

를 동적으로 사용자 입력을 추가 한 후. 이것은 그래, 내가 뭘하는지의 간단한 양식입니다 http://weblogs.asp.net/imranbaloch/archive/2011/03/05/unobtrusive-client-side-validation-with-dynamic-contents-in-asp-net-mvc.aspx

Answer 2

관심이 있으신가요? 검증 할 양식을 얻으 셨다면 어떻게됩니까? 다음

. 
. 
. 
    if (!$('form').valid()) { 
      return false; 
    } 

    // JSON POST... 
. 
. 
. 

문제가 해결되지 않으면 ... 당신은 문제를 발견하지만, 양식이 유효하지 않은 경우 당신이 거기에 반환 거짓 에 시도 할 경우

<script type="text/javascript"> 
    $("form").submit(function (evt) { 

     // validate here should trigger invalid fields 
     $('form').valid(); 

     // JSON POST...   

     // stop form submitting 
     evt.preventDefault(); 
    }); 
</script>