jQuery验证器插件+ ajax提交无效

I use the jQuery validator plugin (1.11) from bassistance.de and submit via php. Now i have add an ajax call in the submit handler at the end of the javacript code, but the call isn't working, nor exist for the firebug console.

我使用来自bassistance.de的jQuery验证器插件（1.11）并通过php提交。现在我在javacript代码末尾的提交处理程序中添加了一个ajax调用，但调用不起作用，对于firebug控制台也不存在。

CASE 1 If i put the ajax call at the beginning of the site, it works but the validator plugin isn't seen anymore.

情况1如果我将ajax调用放在站点的开头，它可以工作，但不再看到验证器插件。

CASE 2 If i put the call inside the submit handler, it doesn't exist and the form is submitted by php.

情况2如果我把调用放在提交处理程序中，它就不存在，表单由php提交。

CASE 3 If i put the code at the end of the page, the contact form is still submitted by php.

案例3如果我把代码放在页面的末尾，联系表格仍然由php提交。

Here's the ajax call:

这是ajax调用：

$("#contactform").submit(function(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "formfiles/submit.php",
        data: $(this).serialize(),
        success: function() {
            $('#contactform').html("<div id='message'></div>");
            $('#message').html("<h2>Your request is on the way!</h2>")
            .append("<p>someone</p>")
            .hide()
            .fadeIn(1500, function() {
                $('#message').append("<img id='checkmark' src='images/ok.png' />");
            });
        }
     });
     return false;
});

Anybody knows what's wrong?

谁知道什么是错的？

Thanks in advance for any help, struggling my head about this.

在此先感谢您的帮助，我为此苦苦挣扎。

EDIT For better understand the problem, here's the complete javascript

编辑为了更好地理解问题，这里是完整的JavaScript

    $(document).ready(function(){
$("#contactform").validate();      
$(".chapta").rules("add", {maxlength: 0});     



var validator = $("#contactform").validate({

     ignore: ":hidden",
    rules: {
        name: {
            required: true,
            minlength: 3
        },
        cognome: {
            required: true,
            minlength: 3
        },
        subject: {
            required: true,

        },



        message: {
            required: true,
            minlength: 10
        }
    },

    submitHandler: function(form) {



   $("#contactform").submit(function(e){
   e.preventDefault();
   $.ajax({
    type: "POST",
    url: "formfiles/submit.php",
    data: $(this).serialize(),
    success: function() {
        $('#contactform').html("<div id='message'></div>");
        $('#message').html("<h2>Your request is on the way!</h2>")
        .append("<p>someone</p>")
        .hide()
        .fadeIn(1500, function() {
            $('#message').append("<img id='checkmark' src='images/ok.png' />");
        });
    }
    });
    return false;
 });
    },

});

 });

EDIT 2

编辑2

The selectors and all the rest seem's to be fine.

选择器和所有其他人似乎都没问题。

 <form action="#n" class="active" method="post" name="contactform" id="contactform">

3 个解决方案

#1

Your ajax belongs inside the submitHandler callback function of the jQuery Validate plugin.

您的ajax属于jQuery Validate插件的submitHandler回调函数。

As per docs,

按照文档，

submitHandler, Callback, Default: default (native) form submit

Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajax after it validated.

submitHandler，Callback，默认：默认（本机）表单提交回调，用于在表单有效时处理实际提交。获取表单作为唯一参数。替换默认提交。在验证后通过Ajax提交表单的正确位置。

Your other problem is that you're calling .validate() twice. After it's called the first time, the other instance is ignored and so are all the rules you're trying to pass into it. The .validate() method gets called ONE time upon DOM ready to initialize the plugin on your form.

你的另一个问题是你要两次调用.validate（）。在第一次调用之后，另一个实例将被忽略，因此您尝试传递给它的所有规则都将被忽略。在DOM准备好初始化表单上的插件时，.validate（）方法被调用一次。

Finally, you don't need to put a submit handler into the submitHandler callback function.

最后，您不需要将提交处理程序放入submitHandler回调函数中。

DEMO: http://jsfiddle.net/nTNLD/1/

演示：http：//jsfiddle.net/nTNLD/1/

$(document).ready(function () {

     $("#contactform").validate({
         ignore: ":hidden",
         rules: {
             name: {
                 required: true,
                 minlength: 3
             },
             cognome: {
                 required: true,
                 minlength: 3
             },
             subject: {
                 required: true
             },
             message: {
                 required: true,
                 minlength: 10
             }
         },
         submitHandler: function (form) {
             $.ajax({
                 type: "POST",
                 url: "formfiles/submit.php",
                 data: $(form).serialize(),
                 success: function () {
                     $(form).html("<div id='message'></div>");
                     $('#message').html("<h2>Your request is on the way!</h2>")
                         .append("<p>someone</p>")
                         .hide()
                         .fadeIn(1500, function () {
                         $('#message').append("<img id='checkmark' src='images/ok.png' />");
                     });
                 }
             });
             return false; // required to block normal submit since you used ajax
         }
     });

 });

#2

You have to put your code into the document ready callback, to be sure that the DOM(your form) is loaded before.

您必须将代码放入文档就绪回调中，以确保之前加载了DOM（您的表单）。

$(document).ready(function() {
 //Code
});

You have to remove your existing .submit() from the submitHandler and place it outside the validation initialization but inside ready. Then inside the submitHandler you only call form.submit(); With form.submit(); you trigger submit, the other one is then fired.

您必须从submitHandler中删除现有的.submit（）并将其置于验证初始化之外但已准备就绪。然后在submitHandler中你只调用form.submit（）;使用form.submit（）;你触发提交，然后另一个被解雇。

Or you place your $.ajax directly into submitHandler.

或者您将$ .ajax直接放入submitHandler。

The way you do it now, you only add the event listener at the time you click your submit button. Thats actually to late. Directly after that your form gets submitted without ajax.

您现在的方式是，只在单击提交按钮时添加事件侦听器。那实际上是迟到了。之后，您的表单将在没有ajax的情况下提交。

#3

It is easy. Only do this

这很容易。只做这个

if ( $( "label.error" ).length===false || $( "label.error" ).is(":visible")===false) {

here set the ajax

}