jQuery 验证器插件 + ajax 提交不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15625195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery validator plugin + ajax submitting not working
提问by Someone33
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 1If i put the ajax call at the beginning of the site, it works but the validator plugin isn't seen anymore.
案例 1如果我将 ajax 调用放在网站的开头，它可以工作，但不再看到验证器插件。
CASE 2If i put the call inside the submit handler, it doesn't exist and the form is submitted by php.
案例 2如果我把调用放在提交处理程序中，它不存在并且表单是由 php 提交的。
CASE 3If i put the code at the end of the page, the contact form is still submitted by php.
CASE 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.
在此先感谢您的帮助，我为此苦苦挣扎。
EDITFor 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">
回答by Sparky
Your ajaxbelongs insidethe submitHandlercallback function of the jQuery Validate plugin.
您ajax属于内部的submitHandlerjQuery的验证插件的回调函数。
根据文档，
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，回调，默认：默认（原生）表单提交
回调，用于在表单有效时处理实际提交。获取表单作为唯一参数。替换默认提交。验证后通过 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 initializethe plugin on your form.
你的另一个问题是你打了.validate()两次电话。第一次调用后，另一个实例将被忽略，您试图传递给它的所有规则也将被忽略。该.validate()方法在 DOM 准备好初始化表单上的插件时被调用一次。
Finally, you don't need to put a submithandler into the submitHandlercallback function.
最后，您不需要将submit处理程序放入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
}
});
});
回答by Marcel Gwerder
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 submitHandlerand place it outside the validation initialization but inside ready. Then inside the submitHandleryou only call form.submit();With form.submit();you trigger submit, the other one is then fired.
您必须从 中删除现有.submit()的submitHandler并将其放置在验证初始化之外但在ready. 然后在submitHandler你只调用form.submit();With form.submit();you trigger submit，然后触发另一个。
Or you place your $.ajaxdirectly 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 的情况下提交。
回答by Carlos
It is easy. Only do this
这很容易。只做这个
if ( $( "label.error" ).length===false || $( "label.error" ).is(":visible")===false) {
here set the ajax
}
