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

时间:2013-05-10 10:05:24

标签: jquery jquery-validate

我有一个表单。我想用jquery验证插件实时验证这个表单。完成表单的Validataion后我想通过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;

    }
});
        });

它没有用。没有验证错误显示在表单中,没有发送ajax请求。我如何克服这个问题?
提前谢谢。

1 个答案:

答案 0 :(得分:2)

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

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

                }
            });
        }
    });

});