我使用bassistance.de的jQuery验证程序插件(1.11)并通过php提交。现在,我在javacript代码的末尾的提交处理程序中添加了一个ajax调用,但是该调用不起作用,firebug控制台也不存在。
案例1 如果我在网站的开头放置了ajax调用,它可以工作,但是不再可以看到验证器插件。
案例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("<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; });
有人知道怎么了吗?
预先感谢您提供的任何帮助,为此我全力以赴。
编辑 为了更好地理解问题,这里是完整的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; }); }, }); });
编辑2
选择器和所有其他似乎都很好。
<form action="#n" class="active" method="post" name="contactform" id="contactform">
您ajax属于 内部 的submitHandlerjQuery的验证插件的回调函数。
ajax
submitHandler
根据文档,
SubmitHandler ,回调,默认值:默认(本机)表单提交 回调,用于在表单有效时处理实际的提交。获取表单作为唯一参数。替换默认的提交。 验证后通过Ajax提交表单的正确位置 。
SubmitHandler ,回调,默认值:默认(本机)表单提交
回调,用于在表单有效时处理实际的提交。获取表单作为唯一参数。替换默认的提交。 验证后通过Ajax提交表单的正确位置 。
另一个问题是您打了.validate()两次电话。第一次调用后,另一个实例将被忽略,您尝试传递给它的所有规则也将被忽略。该.validate()方法在DOM准备 初始化 表单上的插件时被调用一次。
.validate()
最后,您不需要将submit处理程序放入submitHandler回调函数中。
submit
演示: 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 } }); });