Question

当我点击表单的提交按钮时，由于页面上的PHP而被重定向＆＃34;表单已发送＆＃34;。如何使用jQuery验证表单插件保持在同一页面？

PHP文件

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

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

JQUERY FILE

$("#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;
}

我总是被重定向到＆＃34;表格发送＆＃34;页。我对Ajax一无所知： - /

更新2

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

Answer 1

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

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

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

成功功能将在发布后从服务器获取数据。

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

Answer 2

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

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

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

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

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

$("#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 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);
            }
        });
    });

使用jQuery Validate插件保持在页面上

3 个答案: