结合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 
    } 
});