jQuery驗證不與Ajax和jQuery對話框一起工作

在我的網站上我有一個導航和主要內容區域。當你點擊導航鏈接時，主要內容區域內的內容總是通過ajax加載。如果你點擊鏈接「聯繫」，一個文本被加載，其中包含一個包含聯繫表單的jQuery對話框的鏈接。jQuery驗證不與Ajax和jQuery對話框一起工作

問題：當您加載網站並導航到聯繫人窗體區域時，驗證工作完全正常。但是，如果您離開另一個內容區域（=另一個內容通過ajax加載），然後返回到聯繫表單區域並單擊提交按鈕（無需重新加載頁面），驗證失敗，被忽略，表單行動得到執行。如果您重新加載頁面，然後導航到聯繫人表單區域，則所有操作都會再次運行。

我無法理解這種行爲。奇怪的是：在jQuery對話框中未打開的內容區域中驗證另一個表單總是有效，無論您之前點擊了什麼。所以它必須是因爲jQuery對話框彈出和Ajax。誰能理解這個問題？

這裏說到我的代碼：

HTML：

<a href="#popup-form-test" id="open-popup-form-test">open form test popup</a> 

<div id="popup-form-test"> 
    <form id="form-test" action="somelink"> 
     <input type="text" placeholder="testtext eingeben" name="testText"></input> 
     <input type="submit" value="submit"> 
    </form> 
</div>

JS：

var dialogTest = $("#popup-form-test").dialog({ 
     autoOpen: false, 
     modal: true, 
     close: function() { 
      console.log('closed'); 
     } 
    }); 

    $("#open-popup-form-test").on("click", function() { 
     dialogTest.dialog("open"); 
    }); 

    $('#form-test').validate({ 
     debug: true, 
     rules : { 
      testText: { 
       required: true 
      } 
     }, 
     submitHandler: function(form) { 
      alert('submitted'); 
     } 
    });

來源

2015-06-17 Max

這可能是因爲當您試圖將'.validate（）'方法綁定到它時，表單不存在於DOM中，因此導致驗證失敗？一種可能的解決方法是不在運行時綁定該方法，但僅當通過AJAX加載表單時。 – Terry

我該如何解決這個問題？ – Max

沒有一個概念驗證的例子（最小的，具體的和可驗證的例子），幾乎不可能排除故障。您可以在StackOverflow上使用JSFiddle或代碼片段創建一個示例。 – Terry

必須使用open回調.dialog（的），並插入有驗證：

var dialogTest = $("#popup-form-test").dialog({ 
    autoOpen: false, 
    modal: true, 
    open : function (event, ui) { 
     $('#form-test').validate({ 
     debug: true, 
     rules : { 
      testText: { 
      required: true 
      } 
     }, 
     submitHandler: function(form) { 
      alert('submitted'); 
     } 
     }); 
    }, 
    close: function() { 
     console.log('closed'); 
    } 
});

我不能沒有一個有效的例子，但它應該工作。

來源

2015-06-17 09:52:17

我按照您的建議將我的驗證代碼移入了dialogTest變量，但我仍然遇到同樣的問題。 – Max

你應該創建一個片段或者給出帶有問題的頁面的鏈接。其實回調應該是正確的方式，可能有其他東西阻止它。 –

jQuery驗證不與Ajax和jQuery對話框一起工作

回答

相關問題