Jquery验证通过表单元素id实时验证表单并通过ajax提交表单

我有一个表单。我想使用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"/>

它不起作用。表单中没有显示验证错误，也没有发送ajax请求。我如何克服这个问题？？

---

提前谢谢。

您有一些严重的问题

1） 绝对不需要将

.validate（）

放入单击处理程序中。它应该放在DOM就绪事件处理程序中。为什么？因为

.validate（）

是初始化插件的方式，而不是测试表单的方法。一旦插件在表单上初始化，测试就会自动完成

2） 当规则在

.validate（）

中声明时，它们只能通过字段

名称
，而不是
id
分配，不能通过jQuery选择器分配

3） 您应该在表单内部使用按钮，而不是链接。提交按钮由插件自动捕获

4） 第三个字段的
required
拼写错误

"#contact": {requred: true}


工作演示：

嗨，Sparky，谢谢你的回答。它可以用小提琴演奏。但我不知道为什么它不能用在我的代码中。我已经更新了上面的代码。请看一看。它直接提交我的表单，没有ajax请求发送到这里。并且没有错误验证。嗨，Sparky，它的工作：）。我有一个jquery插件版本的问题。我已经更新，它的工作现在很好。
"#contact": {requred: true}

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

                }
            });
        }
    });

});