Javascript 使用jQueryValidatePlugin停留在页面上

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

PHP文件

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

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

HTML文件

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

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

更新2

---

如果我正确理解您的需求，一种方法是尝试从jQuery提交。在submitHandler中，有如下内容：

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

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

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

更多信息：

jQuery

.ajax（）

可以在不刷新页面的情况下将数据提交到服务器，但它不是jQuery验证插件独有的

---

但是，下面是使用jQuery验证插件的两个选项

使用

表单

元素的默认

操作

提交标准表单（如您所做）

要保持在同一页面上，请在

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  
    }
});

---

---

这是，这表明一切正常。我无法测试

ajax

，但表单并没有像您声称的那样刷新页面。

如果您在没有验证插件和更有组织的验证过程的情况下使其正常工作，那么我希望您看看我的代码：

  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);
            }
        });
    });

---

非常感谢。我与Ajax打成平局，但它是相同的（查看我的更新1）@Xroad，根据更新1中的代码，我认为您需要返回并重新阅读。您是否收到任何JavaScript控制台错误？再一次。。。表单的HTML标记在哪里？我没有看到任何与您的

.validate（）

规则对应的输入字段。JSFIDLE的可能副本应该可以帮助我在这里找到一些东西，但您仍然需要将相关代码放在OP中。这只是一个简明的示例。看到这里一切都正常，但显然我无法从JSFIDLE测试您的ajax。@Xroad，是的，看到了：和

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

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

  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);
            }
        });
    });