我有一个html表单,为了验证和处理表单,我使用sendmail.php中的php代码和scripts.js中的jQuery。
php代码:
if($_POST) {
// Enter the email where you want to receive the message
$emailTo = 'monareng.mji@gmail.com';
// Form fields
$clientName = addslashes(trim($_POST['name']));
$clientEmail = addslashes(trim($_POST['email']));
$number = addslashes(trim($_POST['number']));
$message = addslashes(trim($_POST['message']));
// Email Ssubject
$subject = 'Query from My Domain (AGISANANG Design & Build)';
// Compose message to send
$sendMessage = 'Hi' . "\n\n";
$sendMessage .= $message . "\n\n";
$sendMessage .= 'From: ' . $clientName . "\n";
$sendMessage .= 'Email: ' . $clientEmail . "\n";
$sendMessage .= 'Contact number: ' . $number . "\n";
$array = array();
$array['nameMessage'] = '';
$array['emailMessage'] = '';
$array['numberMessage'] = '';
$array['messageMessage'] = '';
if($clientName == '') {
$array['nameMessage'] = 'Please enter your full name.';
}
if (filter_var($clientEmail, FILTER_VALIDATE_EMAIL) == false) {
$array['emailMessage'] = 'Please insert a valid email address.';
}
if (!preg_match('/^(\+?)+([0-9]{10,})$/', $number)) {
$array['numberMessage'] = 'Please enter a valid contact number.';
}
if($message == '') {
$array['messageMessage'] = 'Please enter your message.';
}
$isValid = empty($array['nameMessage']) && empty($array['emailMessage']) &&
empty($array['numberMessage']) && empty($array['messageMessage']);
if($isValid) {
// build headers and send mail
// Headers
$headers = "From: " . $clientName . ' <' . $clientEmail . '>' . "\r\n";
$headers .= "CC: " . 'Monareng Innocent <innocent@agisanang.co.za>' . "\r\n";
$headers .= PHP_EOL;
$headers .= "MIME-Version: 1.0".PHP_EOL;
$headers .= "Content-Type: multipart/mixed;".PHP_EOL;
$headers .= " boundary=\"boundary_sdfsfsdfs345345sfsgs\"";
// Send mail
mail($emailTo, $subject, $sendMessage, $headers);
} else {
//echo the error messages
echo json_encode($array);
}
} else {
header ('location: index.html#contact');
}
?>
jQuery的:
$('.contact-form form').submit(function(e) {
e.preventDefault();
var form = $(this);
var nameLabel = form.find('label[for="contact-name"]');
var emailLabel = form.find('label[for="contact-email"]');
var numberLabel = form.find('label[for="contact-number"]');
var messageLabel = form.find('label[for="contact-message"]');
nameLabel.html('Full name');
emailLabel.html('Email');
numberLabel.html('Contact number');
messageLabel.html('Message');
var postdata = form.serialize();
$.ajax({
type: 'POST',
url: 'sendmail.php',
data: postdata,
dataType: 'json',
success: function(json) {
if(json.nameMessage !== '') {
nameLabel.append(' - <span class="red error-label"> ' + json.nameMessage + '</span>');
}
if(json.emailMessage !== '') {
emailLabel.append(' - <span class="red error-label"> ' + json.emailMessage + '</span>');
}
if(json.numberMessage !== '') {
numberLabel.append(' - <span class="red error-label"> ' + json.numberMessage + '</span>');
}
if(json.messageMessage !== '') {
messageLabel.append(' - <span class="red error-label"> ' + json.messageMessage + '</span>');
}
if(json.nameMessage === '' && json.emailMessage === '' && json.numberMessage === '' && json.messageMessage === '') {
form.fadeOut('fast', function() {
form.parent('.contact-form').append('<h2 class="text-center"><span class="orange">Thanks for contacting us!</span> We will get back to you very soon.</h2>');
});
}
}
});
});
验证填写的输入后,发现所有内容都已按顺序排列:表单应该消失并显示消息“感谢您与我们联系!我们会尽快回复您。”但是,必须出现这种情况!单击“提交”按钮时,字段将被验证,但表单不会淡出,并且消息不会按预期显示。
如何从scripts.js编辑下面的代码,以便在正确填充所有输入字段时触发?
if(json.nameMessage === '' && json.emailMessage === '' && json.numberMessage === '' && json.messageMessage === '') {
form.fadeOut('fast', function() {
form.parent('.contact-form').append('<h2 class="text-center"><span class="orange">Thanks for contacting us!</span> We will get back to you very soon.</h2>');
});
}
答案 0 :(得分:0)
$("#frmDemo").submit(function(e) {
e.preventDefault();
var name = $("#name").val();
var comment = $("#comment").val();
if(name == "" || comment == "" ) {
$("#error_message").show().html("All Fields are Required");
} else {
$("#error_message").html("").hide();
$.ajax({
type: "POST",
url: "post-form.php",
data: "name="+name+"&comment="+comment,
success: function(data){
$('#success_message').fadeIn().html(data);
setTimeout(function() {
$('#success_message').fadeOut("slow");
}, 2000 );
}
});
}
})
</script>
答案 1 :(得分:0)
if(json.nameMessage === '' && json.emailMessage === '' && json.numberMessage === '' && json.messageMessage === '') {
$(form).fadeOut('fast', function() {
form.parent('.contact-form').append('<h2 class="text-center"><span class="orange">Thanks for contacting us!</span> We will get back to you very soon.</h2>');
});
}
此处缺少'$'以选择“表单”