使用 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，但表单没有像您声称的那样刷新页面。

Answer 2

如果我正确理解您想要什么，一种方法是尝试从 jQuery 提交。在 submitHandler 中有类似的东西：

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: function(result){ console.log("success!", result);},
  dataType: dataType
});

棘手的部分是在调用 this 之前将所有信息放入数据对象中。

成功函数会在发布后从服务器获取数据。

更多信息：https://api.jquery.com/jQuery.post/

Answer 3

如果你在没有验证插件和更有条理的验证过程的情况下让它工作，那么我希望你看看我的代码：

  jQuery(document).ready(function($) {

     $('#MyForm').on('submit', function(){
        var form = this;
        if(validateForm(form)) {
            var values = $(form).serialize();
            $.ajax({
                url: "test.php",
                type: "post",
                data: values ,
                success: function (response) {
                    // you will get response from your php page (what you echo or print)
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(textStatus, errorThrown);
                }


            });
            event.preventDefault(); //changed to allow the tag manager to notice that the form was submitted
        }
        else{
            event.preventDefault();
            return false;
        }
      });

        // validate Form
        function validateForm(form) {
            valid = true;

            $(form).find('input[type=text], input[type=email]').each(function(i, val){
                if(validateField(val, true) == false) { valid = false; }
            });

            return valid;
        }

        // validate all form fields
        function validateField(field, submit) {
            var val = $(field).val();
            if($(field).attr('aria-required') == 'true' && submit){
                if(val == '') {
                    $(field).parent().removeClass('valid');
                    $(field).parent().addClass('error');
                    return false;
                }else {
                    $(field).parent().removeClass('error');
                    $(field).parent().addClass('valid');
                    return true;
                }
                // you can more specific
                if($(field).attr('type') == 'text') {
                    $(field).parent().addClass('error');
                    return false; }
                else {
                    $(field).parent().removeClass('error');
                    $(field).parent().addClass('valid');
                    return true;
                }
                // you can more specific
                if($(field).attr('type') == 'email') {
                    $(field).parent().addClass('error');
                    return false; }
                else {
                    $(field).parent().removeClass('error');
                    $(field).parent().addClass('valid');
                    return true;
                }
            }
        }
        // Run validation before Submit the form
        $('input[type=text], input[type=email]').on('change', function(){
            if($(this).val() != ''){
                $(this).parent().removeClass('error valid');
                validateField(this, false);
            }
        });
    });