我使用来自bassistance.de的jQuery验证器插件(1.11)并通过PHP提交.
现在我在 javacript代码末尾的提交处理程序中添加了一个ajax调用,但调用不起作用,对于firebug控制台也不存在.
现在我在 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,subject: {
required: true,},message: {
required: true,minlength: 10
}
},submitHandler: function(form) {
$("#contactform").submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",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属于jQuery Validate插件的submitHandler回调函数.
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.
你的另一个问题是你要两次调用.validate().在第一次调用之后,另一个实例将被忽略,因此您尝试传递给它的所有规则都将被忽略.在DOM准备好初始化表单上的插件时,.validate()方法被调用一次.
最后,您不需要将提交处理程序放入submitHandler回调函数中.
DEMO：http://jsfiddle.net/nTNLD/1/
$(document).ready(function () {
$("#contactform").validate({
ignore: ":hidden",rules: {
name: {
required: true,minlength: 3
},cognome: {
required: true,subject: {
required: true
},message: {
required: true,minlength: 10
}
},submitHandler: function (form) {
$.ajax({
type: "POST",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
}
});
});
