在通過Ajax加載的表單上激活jQuery驗證的正確方法是什麼？

我有一個WordPress/BuddyPress註冊表單，我想通過Ajax調用來處理表單提交，而不是直接提交頁面。我有以下代碼：在通過Ajax加載的表單上激活jQuery驗證的正確方法是什麼？

<script type="text/javascript"> 

jQuery(document).ready(function(){ 
    setupValidation(); 
}); 

function setupValidation() 
{ 
jQuery("#signup_form").validate({ 
    submitHandler: function(form) { 

     jQuery("#signup_submit").attr('disabled', 'disabled'); 
     jQuery(".form-actions").html('<img src="/img/ajax-loader.gif" /> Processing...'); 

     jQuery.post('<?php echo $_SERVER['REQUEST_URI']; ?>', jQuery("#signup_form").serialize(), function(data) { 

      var response = jQuery(data).find('#signup_form'); 

      if(jQuery(response).length) 
      { 
       jQuery('#signup_form').html(response); 

       setupValidation(); 
      } 
      else 
      { 
        alert("Form submitted."); 
       top.location = self.location.href; 
       } 
      }); 

     } 
    }); 
} 

</script>

基本上，這是做什麼通過AJAX提交表單數據，然後檢查響應，看是否有錯誤。如果出現錯誤，我想用響應HTML替換舊的HTML格式，以顯示任何錯誤消息以及原始格式。

我遇到的問題是雖然驗證處理初始表單正常工作，但當出現錯誤並且表單重新加載時，驗證不會被初始化。相反，在控制檯中，我得到這個錯誤：

Uncaught TypeError: Cannot read property 'settings' of undefined

此錯誤是每次被點擊或關注的AJAX加載窗體上的場時間重複。此外，submitHandler似乎還沒有第二次工作，表單只是提交舊式的方式。（沒有阿賈克斯）

任何幫助，這將不勝感激。這似乎只是簡單的我錯過了，但我不知道它是什麼。我想要做的就是在通過ajax加載的表單上重新初始化驗證代碼。

在此先感謝，詹姆斯。

來源

2013-05-17 warkior

你從'submitHandler內調用'setupValidation' '它是'.validate（）'的一部分，它已經在'setupValidation'裏面了......在這裏看到這個問題？ '.validate（）'是_initialization_方法，只需要調用_once_。在同一個表單上再次調用它並沒有實際意義，因爲'submitHandler'只在一個有效的表單上觸發，從它本身內部調用它絕對沒有用處。 – Sparky

**引用OP **：_「基本上，這是通過ajax提交表單數據，然後檢查響應以查看是否有錯誤。如果有錯誤，我想用舊的表單HTML替換響應HTML以顯示任何錯誤消息以及原始表單。「_〜讓我直截了當地看看...如果客戶端驗證出錯，您希望服務器端驗證提供錯誤消息？這沒有意義。 – Sparky

與線程標題相對應的代碼在哪裏？換句話說，加載表單的ajax在哪裏？ – Sparky

而不是完全重新加載表單，用一組新的HTML，爲什麼不重新設置表單？

如果響應包含除了形式的重要消息，也許只是返回消息，並堅持表單中的某個地方......

 if(jQuery(response).length) 
     { 
      //jQuery('#signup_form').html(response); 
      jQuery('#messages').html(response);//would need to create a div with id of "messages" 

      jQuery('#signup_form').data('validator').resetForm(); 
      jQuery('#signup_form').get(0).reset(); 

     }

來源

2013-05-17 21:29:04 Ryley

在通過Ajax加載的表單上激活jQuery驗證的正確方法是什麼？

回答

相關問題