如何將bassistance.de jquery驗證器與jquery ajax相結合

Question

我有一個表單，我想驗證客戶端，然後通過ajax發佈。 我有使用一種或另一種工作的形式，但不知道如何將它們結合起來。瀏覽過aass網頁後，我比以前更加困惑。

客戶端：

jQuery(document).ready(function() { 
jQuery("#this_form").validate({ 
    }); 
}); 

阿賈克斯：

jQuery("#submit").click(function(){ 

    var formData = jQuery("#this_form").serializeArray(); 

    jQuery.ajax({ 
     type: "POST", 
     url: "process_form.php", 
     cache: false, 
     data: formData, 
     success: onSuccess, 
     error: onError 
    }); 

    return false; 
}); 

我想知道的是，我怎麼能觸發兩種方法結合上面的成功驗證了ajax。我在這樣的假設上提出這樣的問題，即有一種直接的方式可以做到這一點，因爲我發現與上述代碼幾乎沒有什麼相似之處。

試過這樣：

jQuery(document).ready(function() { 
    $('#submit').live('click', function(event){ 
     event.preventDefault(); 

    var form = $('#this_form'); 
    if(form.valid()){ 
     var formData = jQuery("#this_form").serializeArray(); 
      jQuery.ajax({ 
       type: "POST", 
       url: "process_form.php", 
       cache: false, 
       data: formData, 
       success: onSuccess, 
       error: onError 
        }); 
       return false; 
       }; 
    }); 
}); 

但這並不驗證所需的屬性，只是做了ajax。 我想我正在尋找的是驗證器返回true的方式，但不提交表單然後發射掉ajax事件，但我不知道如何構造這個。

感謝

Answer 1

試試這個：

$("#button").click(function(){ 
    if($("#form").valid()){ 
     //Ajax submission 
    } 
}); 

而在你的按鈕，你可以添加一個type="button"防止自動提交。

Answer 2

排序與此：

jQuery的（文件）。就緒（函數（）{

jQuery("#this_form").validate({ 
     debug: true,  
     rules:{ 
        // add rules here 
     }, 
     messages: { 
      //add messages here 
      } 
     }, 
     submitHandler: function(form){ 
      jQuery.ajax({ 
       type: "POST", 
       url: "processform.php", 
       cache: false, 
       data: jQuery(form).serialize(), 
       success: onSuccess, 
       error: onError, 
      }); 
     }   
    }); 
}); 

function onSuccess(data, status) 
{ 
data = jQuery.trim(data); 
jQuery("#return_message").html(data); 
} 

function onError(data, status) 
{ 
// handle an error 
}