Question

我正在为我的一个表单使用jQuery验证插件。在提交（并提供满足所有验证规则）时，我想使用ajax / hidden div而不是页面刷新来显示感谢消息。但是，我似乎无法使其工作（并且显然使用了错误的代码！）

有人可以指出我如何使其发挥作用的正确方向吗？

我使用以下内容：

<script type="text/javascript">
    $(function()
    {
                $("#myForm").validate({
                    rules: {
                        firstname: {required: true},
                        lastname: {required: true},
                        email: {required: true, email:true},
                        mobile: {required: true},
                        landline: {required: false},
                        comments: {required: true},
                        SUBMIT: "required SUBMIT",
                        success: function() {$('#thankyou1').slideDown("slow")}
                    },
                });
            });
    </script>   

    <form action="bin/contact.php" method="post" id="myForm">...</form>
    <div id="thankyou1">Thank you for contacting us we will be in touch shortly!</div>

Answer 1

通过在 jQuery Validator 的submitHandler函数中添加以下代码，使用ajax提交表单：

submitHandler: function (form) {
         var valuesToSubmit = $(form).serialize();
          $.ajax({
            type: "POST",
            url: $(form).attr('action'),
            data: valuesToSubmit,
            dataType: "JSON"
          }).done(successFn).fail(errorFn);
        return false; // prevents the default form submit
       }

var successFn = function (json) {
   /* your success actions*/
};

var errorFn = function (json) {
   /* your error actions*/
};

jQuery验证插件显示div成功

1 个答案: