JQuery驗證插件：防止嵌套形式的驗證問題

Question

我有一個表單，我使用驗證。此表單有一個照片上傳部分。最初，這部分包含六個元素用下面的代碼：

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

我已綁定的功能，爲類photo_upload click事件。此功能以最小的形式，與此代碼替換圖像： 複製代碼

<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進行包裝，配送使用grunt和uglify）更困難但並非不可能。 function delegate(event)變成function b(b)。

一種替代方法將是修補結合delegate當選擇使用。我認爲這是一個更復雜的修復方法，但瀏覽器的性能會稍好一些。