結合jQuery驗證和Ajax表單提交

Question

我有一個簡單的表格一樣

<form id="invite_form"> 

    <input type="text" name="invite_email" id="invite_email" /> 

    <textarea name="invite_message">Hello!</textarea> 

    <div id="send_div"> 
     <span id="send_btn">Send</span> 
    </div> 
</form> 

我的JS如下：通過Ajax提交表單：

$('#send_btn').live('click', function(event){ 
    event.preventDefault(); 

    var form = $('#invite_form'); 

    $.ajax({ 
     url: '/invite', 
     type: "POST", 
     data: form.serialize(), 
     dataType: "html", 
     success: function(html) { 
      $('#send_div').html('Success!'); 
     } 
    }); 
}); 

這工作得很好。

現在我想圍繞此代碼包裝一個jQuery驗證函數，以確保[1]電子郵件字段已填充且[2]是有效的電子郵件。

我使用Jorn的bassistance.de jQuery驗證插件從http://bassistance.de/jquery-plugins/jquery-plugin-validation/。

任何人都可以給如何將驗證調用綁定到這個Ajax的路線圖？

感謝您的幫助，非常感謝。

Answer 1

試試這個：

$('#send_btn').live('click', function(event){ 
    event.preventDefault(); 

    var form = $('#invite_form'); 
    if(form.valid()) { 
     $.ajax({ 
      url: '/invite', 
      type: "POST", 
      data: form.serialize(), 
      dataType: "html", 
      success: function(html) { 
       $('#send_div').html('Success!'); 
      } 
     }); 
    else { 
    ; //do whatever if the form is not valid 
    } 
});