Jquery验证通过表单元素ID进行实时验证，并通过ajax提交表单

Question

我有一个表单。我想用jquery验证插件来验证此表单。完成表单的验证后，我想通过ajax提交表单。我想通过它的id来验证表单的每个字段。 到目前为止，我已经做到了这一点：

<form id="booking-form" name="booking-form" method="post" class="form-horizontal"> 
     <input type="text" id="firstname" value="" name="book[firstname]"> 
    <input type="text" id="email" value="" name="book[email]"> 
    <input type="text" id="contact" value="" name="book[contact]"> 
     <input type="submit" id="submit-booking" class="btn btn-primary btn-large" value="Book Now"/> 

在我的JavaScript函数：

$(document).ready(function() { 

     $("#booking-form").validate({ 
    rules: { 
     "book[firstname]": { 
      required: true 
     }, 
     "book[email]": { 
      required: true, 
      email: true 
     }, 
     "book[contact]": { 
      required: true 
     } 
    }, 
    submitHandler: function (form) { 

    alert("fff"); 
     var formData = $(form).serialize(); 
     //alert(formData); 


     $.ajax({ 
      url: "bs_client_function.php?action=new_b", 
      type: "post", 
      data: formData, 
      beforeSend: function() { 

      }, 
      success: function (data) { 

      } 
     }); 
     return false; 

    } 
}); 
     }); 

它没有work.No验证错误显示的形式，没有Ajax请求是sending.How我克服这个问题？？
在此先感谢。

Answer 1

你有一些严重的问题......

1）完全没有必要把.validate()点击处理程序内。它应该进入DOM就绪事件处理程序。为什么？因为.validate()是你如何初始化的插件，而不是测试表单的方法。插件在表单上初始化后，会自动完成测试。

2）当规则被内部.validate()声明的，它们只能通过场name分配，不通过id而不是由jQuery选择。

3）你应该真的使用一个按钮，而不是一个链接。提交按钮由插件自动捕获。

4）您在第三个字段上拼写错误地为required。

"#contact": {requred: true} 

---

工作演示：http://jsfiddle.net/P5tVp/

$(document).ready(function() { 

    $("#booking-form").validate({ 
     rules: { 
      "b[firstname]": { 
       required: true 
      }, 
      "b[email]": { 
       required: true, 
       email: true 
      }, 
      "book[contact]": { 
       required: true 
      } 
     }, 
     submitHandler: function (form) { 
      var formData = $(form).serialize(); 
      $.ajax({ 
       url: "bs_client_function.php?action=new_b", 
       type: "post", 
       data: formData, 
       beforeSend: function() { 

       }, 
       success: function (data) { 

       } 
      }); 
     } 
    }); 

});