javascript - 使用 jQuery Validate 插件留在页面上

Question

当我单击表单的提交按钮时，由于“表单已发送”页面上的 PHP，我被重定向。如何与 jQuery 验证表单插件保持在同一页面？

PHP 文件

    <?php
        // [I HAVE CUT THE CODE]

        if(mail($to, $subject, $message, $headers)){
            echo "Form sent";
        } else {
            echo "Form not sent";
        }
    ?>

JQUERY 文件

$("#form-contact").validate({

submitHandler: function(form) {
            $('.btn-validate-group:visible').hide();
            $('.message-success').fadeIn(1000);
            form.submit();
        }

});

HTML 文件

<form id="form-contact" action="php/traitement.php" method="post"></form>

更新1

submitHandler: function(form) {
    $('.btn-validate-group:visible').hide();
    $('.message-success').fadeIn(1000);
    $.ajax({
          type: "POST",
          url: url,
          data: data,
          success: function(result){ console.log("success!", result);},
          dataType: dataType
        });
    return false;
}

我总是被重定向到“表单已发送”页面。我对 Ajax 一无所知:-/

更新2

http://jsfiddle.net/Xroad/2pLS2/25/

Answer 1

jQuery .ajax() 可用于在不刷新页面的情况下向服务器提交数据，但这并不是 jQuery Validate 插件独有的。

<小时/>

但是，这里有两个使用 jQuery Validate 插件的选项。

使用 form 元素的默认 action 提交标准表单(正如您所做的那样)...

$("#form-contact").validate({
    submitHandler: function(form) {
        $('.btn-validate-group:visible').hide();
        $('.message-success').fadeIn(1000);
        form.submit();  // standard submit of the default form action
    }
});

要保持在同一页面上，请在 submitHandler 回调中使用 .ajax()...

$("#form-contact").validate({
    submitHandler: function(form) {
        $('.btn-validate-group:visible').hide();
        $('.message-success').fadeIn(1000);
        $.ajax({    // submit form using ajax
            // your ajax options here
        });
        return false;  // block default form action  
    }
});

See the jQuery .ajax() documentation for the options .

<小时/>

这是your own jsFiddle ，这表明一切正常。我无法测试 ajax 但表单没有像您声称的那样刷新页面。