jQueryvalidation器插件+ ajax提交无法正常工作

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

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

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

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

这是ajax调用：

$("#contactform").submit(function(e){ e.preventDefault(); $.ajax({ type: "POST", url: "formfiles/submit.php", data: $(this).serialize(), success: function() { $('#contactform').html("
"); $('#message').html("
Your request is on the way!
") .append("
someone
") .hide() .fadeIn(1500, function() { $('#message').append(""); }); } }); return false; }); 

谁知道什么是错的？

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

编辑为了更好地理解问题，这里是完整的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("
"); $('#message').html("
Your request is on the way!
") .append("
someone
") .hide() .fadeIn(1500, function() { $('#message').append(""); }); } }); return false; }); }, }); }); 

编辑2

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

Answer 1

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

按照文档 ，

submitHandler ，Callback，默认：默认（本机）表单提交

当表单有效时，回调处理实际提交。 获取表单作为唯一参数。 替换默认提交。 在validation后通过Ajax提交表单的正确位置 。

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

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

演示： 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("
"); $('#message').html("
Your request is on the way!
") .append("
someone
") .hide() .fadeIn(1500, function () { $('#message').append(""); }); } }); return false; // required to block normal submit since you used ajax } }); }); 

Answer 2

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

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

您必须从submitHandler删除现有的.submit()并将其置于validation初始化之外但ready 。 然后在submitHandler你只调用form.submit(); 使用form.submit(); 你触发submit ，然后另一个被解雇。

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

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

Answer 3

这很容易。 只做这个

 if ( $( "label.error" ).length===false || $( "label.error" ).is(":visible")===false) { here set the ajax }