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) { 

       } 
      }); 
     } 
    }); 

});