jQuery的验证器插件+ AJAX提交不工作插件、工作、jQuery、AJAX
我用从bassistance.de jQuery的验证器插件（1.11），并通过PHP的提交。 现在，我在提交处理时的javacript code末尾加上Ajax调用，但呼叫不工作，也不存在Firebug控制台。
案例1 如果我把在现场的开始Ajax调用，它的工作原理，但验证器插件是没有看到了。
CASE 2 如果我把提交处理程序中调用，它不存在，并在表单提交由PHP。
CASE 3 如果我把code在页的末尾，触点形式仍然是提交的PHP。
下面是Ajax调用：
$（＃联系形式）。递交（函数（五）{
即preventDefault（）;
$阿贾克斯（{
键入：POST，
网址：formfiles / submit.php
数据：$（本）.serialize（）
成功：函数（）{
$（'＃联系形式）HTML（＆LT; DIV ID ='消息'＆GT;＆LT; / DIV＆gt;中）;
$（'＃消息）HTML（＆LT; H2＆GT;您的要求是在路上＆LT;！/ H2＆gt;中）
.append（＆其中p为H.;某人＆所述; / P＆gt;中）
。隐藏（）
.fadeIn（1500，函数（）{
$（'＃消息）追加。（＆LT; IMG ID ='对号'SRC =图像/ ok.png/＆gt;中）;
}）;
}
}）;
返回false;
}）;
任何人都知道出了什么问题？
在此先感谢您的帮助，挣扎着我的头这一点。
修改为了更好地理解这个问题，以下是完整的JavaScript
$（文件）。就绪（函数（）{
$（＃联系形式）确认（）。
$（chapta）的规则。（添加，{最大长度：0}）;
VAR验证= $（＃联系形式）。验证（{
忽略：：隐藏，
规则：{
名称： {
要求：真实，
MINLENGTH：3
}，
cognome：{
要求：真实，
MINLENGTH：3
}，
学科： {
要求：真实，
}，
信息： {
要求：真实，
MINLENGTH：10
}
}，
submitHandler：功能（形式）{
$（＃联系形式）。递交（函数（五）{
即preventDefault（）;
$阿贾克斯（{
键入：POST，
网址：formfiles / submit.php
数据：$（本）.serialize（）
成功：函数（）{
$（'＃联系形式）HTML（＆LT; DIV ID ='消息'＆GT;＆LT; / DIV＆gt;中）;
$（'＃消息）HTML（＆LT; H2＆GT;您的要求是在路上＆LT;！/ H2＆gt;中）
.append（＆其中p为H.;某人＆所述; / P＆gt;中）
。隐藏（）
.fadeIn（1500，函数（）{
$（'＃消息）追加。（＆LT; IMG ID ='对号'SRC =图像/ ok.png/＆gt;中）;
}）;
}
}）;
返回false;
}）;
}，
}）;
}）;
编辑2
选择器和所有其余的看起来的要罚款。
＆LT;形式的行动=＃N级=积极的方法=邮报名称=联系形式ID =联系形式＆GT;
解决方案
您 AJAX 所属的在的的 submitHandler jQuery的验证插件的回调函数。
按照文档，
submitHandler ，回调，默认值：默认值（本机）的形式提交 回调处理实际提交窗体时 有效。获取形式作为唯一的参数。替换默认 提交。 在正确的地方通过Ajax后，提交表单 验证
您的另一个问题是，你叫 .validate（）的两倍。之后，它被称为第一次，其他情况下被忽略，所以都是你想传递到它的规则。在DOM的 .validate（）方法被调用一次准备的初始化的表单上的插件。
最后，你并不需要把提交处理到 submitHandler 的回调函数。
演示： https://m.xsw88.com/allimgs/daicuo/20230910/106.png/＆gt;中）; }）; } }）; 返回false; //需要阻止，因为你使用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.
CASE 1 If i put the ajax call at the beginning of the site, it works but the validator plugin isn't seen anymore.
CASE 2 If i put the call inside the submit handler, it doesn't exist and the form is submitted by php.
CASE 3 If i put the code at the end of the page, the contact form is still submitted by php.
Here's the ajax call:
$("#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
$(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
The selectors and all the rest seem's to be fine.
<form action="#n" class="active" method="post" name="contactform" id="contactform">
解决方案
Your ajax belongs inside the submitHandler callback function of the jQuery Validate plugin.
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.
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.
Finally, you don't need to put a submit handler into the submitHandler callback function.
DEMO: 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
}
});
});
