[英]Php Ajax contact form repeat errors when click on submit button
我通过php和jquery ajax创建了联系表单。下面的代码可以正常工作,但是我有两个问题。 一:当我点击发送按钮时,显示所有错误。 例如,我想要输入名称为空时仅显示空错误,而不显示长度错误。 二:当我多次点击发送按钮时,每次重复或显示错误。 请查看我的代码,并解决我的问题和其他问题(如果看到的话)。
jQuery(function() {
jQuery('#contactForm').submit(function(event) {
var bsnConData = {
'name':jQuery('#bsnname').val(),
'subject':jQuery('#bsnsubject').val(),
'email':jQuery('#bsnemail').val(),
'message':jQuery('#bsnmessage').val()
};
jQuery.ajax({
url: 'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php',
type: 'POST',
data: bsnConData,
dataType: 'json',
cache: false
}).done(function(data) {
if (data.success == false) {
if (data.errors.nameEmpty) {
jQuery('.form-name').append('<p>'+ data.errors.nameEmpty +'</p>');
}
if (data.errors.nameLengthErrors) {
jQuery('.form-name').append('<p>'+ data.errors.nameLengthErrors +'</p>');
}
if (data.errors.messageEmpty) {
jQuery('.form-message').append('<p>'+ data.errors.messageEmpty +'</p>');
}
if (data.errors.emailEmpty) {
jQuery('.form-email').append('<p>'+ data.errors.emailEmpty +'</p>');
}
} else {
jQuery('#response').html('<p>'+ data.errors.messageSent +'</p>');
}
}).fail(function(data) {
console.log('Email Error');
});
event.preventDefault();
});
});
如果您要使用“否则,则”将自己限制为仅一个错误。 为防止代码多次触发,请创建一个全局标志(myFlag)。 像这样:
var myObject = {};
myObject.myFlag = false;
jQuery(function() {
jQuery('#contactForm').submit(function(event) {
var bsnConData = {
'name':jQuery('#bsnname').val(),
'subject':jQuery('#bsnsubject').val(),
'email':jQuery('#bsnemail').val(),
'message':jQuery('#bsnmessage').val()
};
jQuery.ajax({
url: 'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php',
type: 'POST',
data: bsnConData,
dataType: 'json',
cache: false
}).done(function(data) {
if(myObject.myFlag != true){
if (data.success == false) {
myObject.myFlag = true;
if (data.errors.nameEmpty) {
jQuery('.form-name').append('<p>'+ data.errors.nameEmpty +'</p>');
}
else if (data.errors.nameLengthErrors) {
jQuery('.form-name').append('<p>'+ data.errors.nameLengthErrors +'</p>');
}
else if (data.errors.messageEmpty) {
jQuery('.form-message').append('<p>'+ data.errors.messageEmpty +'</p>');
}
else if (data.errors.emailEmpty) {
jQuery('.form-email').append('<p>'+ data.errors.emailEmpty +'</p>');
}
} else {
jQuery('#response').html('<p>'+ data.errors.messageSent +'</p>');
}
}
}).fail(function(data) {
console.log('Email Error');
});
event.preventDefault();
});
});
您可以在发送之前在jquery中验证您的表单,请记住也在服务器中验证此信息。
jQuery(function() {
jQuery('#contactForm').submit(function(event) {
event.preventDefault();
if(jQuery('#bsnname').val() == ''){
alert('bs name is empty');
return;
}
if(jQuery('#bsnsubject').val() == ''){
alert('bsnsubject is empty');
return;
}
if(jQuery('#bsnemail').val() == ''){
alert('bsnemail is empty');
return;
}
if(jQuery('#bsnmessage').val() == ''){
alert('bsnmessage is empty');
return;
}
var bsnConData = {
'name':jQuery('#bsnname').val(),
'subject':jQuery('#bsnsubject').val(),
'email':jQuery('#bsnemail').val(),
'message':jQuery('#bsnmessage').val()
};
jQuery.ajax({
url: 'http://localhost/wp/wp-content/plugins/Yallanpe-BSN/inc/class-contact-inc.php',
type: 'POST',
data: bsnConData,
dataType: 'json',
cache: false
}).done(function(data) {
console.log('done');
}).fail(function(data) {
console.log('Email Error');
});
event.preventDefault();
});
});
在您的php文件上,您可以执行类似的操作并返回错误
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.