JQuery 유효성 검사 플러그인 : 중첩 된 양식의 유효성 검사 문제 방지

Question

유효성 검사를 사용하는 양식이 있습니다. 이 양식에는 사진 업로드를위한 섹션이 있습니다. 내가 photo_upload의 클래스의 클릭 이벤트에 함수를 바인딩 한

<img class="photo_upload" src="image/app/photo_upload.jpg"> 

: 처음에이 부분은 다음 코드로 여섯 개 요소가 포함되어 있습니다. 이 기능은이 코드를 사용하여 최소한의 양식을 사용하여 이미지를 대체 복사 코드

<form onsubmit="startUploadImage();" target="control_target" 
enctype="multipart/form-data" method="post" action="index.php"> 
<input type="hidden" value="add_image" name="service"> 
<input type="hidden" value="1000000" name="MAX_FILE_SIZE"> 
<input type="file" size="10" name="photo" id="photo_file_upload"><br> 
<button onclick="javascript:cancel_photo_upload();return false;">Cancel</button> 
</form> 

이미지 클릭 후 그래서, 기본적으로, 나는 새로운 형태의 내 원래의 검증 형태로 중첩 된 것입니다. 이제이 새 양식을 사용하여 이미지를 업로드하면 다음과 같은 오류 메시지가 나타납니다.

validator is undefined 
http://host.com/path/index.php 
Line 286 

여기 무슨 일이 일어나고 있습니까? 내 생각 엔이

1. 우리 이후
2. ,
3. 유효성 검사를 트리거 양식을 찾으려고 이벤트는 외부 형태 우리가 그 양식의 검증이 때, 검증이 트리거
4. 까지 거품 제출하다 유효성 검사를 내부 양식에 연결하지 않았 으면 'undefined'를 반환합니다.

지금 내 평가가 정확합니까? 그것이 좋든 그렇지 않든, 어떻게이 문제를 해결할 수 있습니까?

Answer 1

Nested forms are not allowed in HTML. 두 개의 제출 단추가있는 단일 양식을 사용하고 서버 쪽 양식 핸들러를 설정하여 단추가 사용되었고 그에 따라 분기되도록 인식해야합니다.

Answer 2

페이지 구조를 변경하지 않으려는 경우 이벤트 처리 기능 delegate을 패치하여이 오류를 수정할 수 있습니다.

jquery.validate.js의 v1.15.0 라인 401-408 :

내 패치 버전

function delegate(event) { 
    var validator = $.data(this.form, "validator"), 
     eventType = "on" + event.type.replace(/^validate/, ""), 
     settings = validator.settings; 
    if (settings[ eventType ] && !$(this).is(settings.ignore)) { 
     settings[ eventType ].call(validator, this, event); 
    } 
} 

:

function delegate(event) { 
    if (this.form === event.delegateTarget) { 
     var validator = $.data(this.form, "validator"), 
      eventType = "on" + event.type.replace(/^validate/, ""), 
      settings = validator.settings; 
     if (settings[ eventType ] && !$(this).is(settings.ignore)) { 
      settings[ eventType ].call(validator, this, event); 
     } 
    } 
} 

축소 된 버전은 패치 (jquery.validate.js는 분배 패키징 uglify와 함께 grunt 사용)은 어렵지만 불가능하지 않습니다. function delegate(event)은 function b(b)이됩니다.

delegate을 바인딩 할 때 사용 된 선택기를 패치하는 것이 대안입니다. 더 복잡한 문제를 해결할 수 있다고 생각하지만 브라우저 성능은 조금 향상 될 것입니다.