【发布时间】：2019-12-13 14:02:08
【问题描述】：
我有一个带有简单 jQuery 验证的联系表单，并使用 Php 发送表单内容。我正在尝试包括电话字段验证。 JavaScript 在验证电话字段和自动格式化/更正/完成电话字段时工作正常。但是 PHP 脚本不起作用。如果我删除 phoneNumber 字段，它工作正常。
(function($) {
"use strict";
/* Alert Boxes
* ------------------------------------------------------ */
var clAlertBoxes = function() {
$('.alert-box').on('click', '.alert-box__close', function() {
$(this).parent().fadeOut(500);
});
};
/* Contact Form
* ------------------------------------------------------ */
var clContactForm = function() {
/* local validation */
$('#contactForm').validate({
/* submit via ajax */
submitHandler: function(form) {
var sLoader = $('.submit-loader');
$.ajax({
type: "POST",
url: "inc/sendEmail.php",
data: $(form).serialize(),
beforeSend: function() {
sLoader.slideDown("slow");
},
success: function(msg) {
// Message was sent
if (msg == 'OK') {
sLoader.slideUp("slow");
$('.message-warning').fadeOut();
$('#contactForm').fadeOut();
$('.message-success').fadeIn();
}
// There was an error
else {
sLoader.slideUp("slow");
$('.message-warning').html(msg);
$('.message-warning').slideDown("slow");
}
},
error: function() {
sLoader.slideUp("slow");
$('.message-warning').html("Something went wrong! Please try again.");
$('.message-warning').slideDown("slow");
}
});
}
});
};
})(jQuery);fieldset {
margin: 0;
padding: 0;
}
.message-warning,
.message-success {
display: none;
background: #111111;
font-size: 1.5rem;
line-height: 2;
padding: 3rem;
margin-bottom: 3.6rem;
width: 100%;
}
.message-warning {
color: #ff6163;
}
.message-success {
color: #39b54a;
}
.message-warning i, .message-success i {
margin-right: 10px;
font-size: 1.2rem;
}
/* form loader
* ----------------------------------------------- */
.submit-loader {
display: none;
position: relative;
left: 0;
top: 1.8rem;
width: 100%;
text-align: center;
margin-bottom: 3rem;
}
.submit-loader .text-loader {
display: none;
font-family: "montserrat-regular", sans-serif;
font-size: 1.3rem;
font-weight: bold;
line-height: 1.846;
color: #666666;
letter-spacing: .2rem;
text-transform: uppercase;
}
.oldie .submit-loader .s-loader {
display: none;
}
.oldie .submit-loader .text-loader {
display: block;
}
/* ---------------------------------------------------------------
* ## loader animation
* --------------------------------------------------------------- */
.s-loader {
margin: 1.2rem auto 3rem;
width: 70px;
text-align: center;
-webkit-transform: translateX(0.45rem);
-ms-transform: translateX(0.45rem);
transform: translateX(0.45rem);
}
.s-loader > div {
width: 9px;
height: 9px;
background-color: #FFFFFF;
border-radius: 100%;
display: inline-block;
margin-right: .9rem;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out both;
animation: bouncedelay 1.4s infinite ease-in-out both;
}
.s-loader .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.s-loader .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}<?php
<?php
// Replace this with your own email address
$siteOwnersEmail = 'testemail@outlook.com';
if($_POST) {
$name = trim(stripslashes($_POST['contactName']));
$email = trim(stripslashes($_POST['contactEmail']));
$phone = stripslashes($_POST['phoneNumber']);
$subject = trim(stripslashes($_POST['contactSubject']));
$contact_message = trim(stripslashes($_POST['contactMessage']));
// Check Name
if (strlen($name) < 2) {
$error['name'] = "Please enter your name.";
}
// Check Email
if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
$error['email'] = "Please enter a valid email address.";
}
// Check Phone
if(!preg_match("/^[0-9]{3}-[0-9]{4}-[0-9]{4}$/", $phone)) {
$error['phone'] = "Please enter a valid phone number.";
}
// Check Message
if (strlen($contact_message) < 15) {
$error['message'] = "Please enter your message. It should have at least 15 characters.";
}
// Subject
if ($subject == '') { $subject = "Contact Form Submission"; }
// Set Message
$message .= "Email from: " . $name . "<br />";
$message .= "Email address: " . $email . "<br />";
$message .= "Contact Phone: " . $phone . "<br />";
$message .= "Message: <br />";
$message .= $contact_message;
$message .= "<br /> ----- <br /> This email was sent from your site's contact form. <br />";
// Set From: header
$from = $name . " <" . $email . ">";
// Email Headers
$headers = "From: " . $from . "\r\n";
$headers .= "Reply-To: ". $email . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
if (!$error) {
ini_set("sendmail_from", $siteOwnersEmail); // for windows server
$mail = mail($siteOwnersEmail, $subject, $message, $headers);
if ($mail) { echo "OK"; }
else { echo "Something went wrong... Please try again."; }
} # end if - no validation error
else {
$response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null;
$response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null;
$response .= (isset($error['phone'])) ? $error['phone'] . "<br /> \n" : null;
$response .= (isset($error['message'])) ? $error['message'] . "<br />" : null;
echo $response;
} # end if - there was a validation error
}
?>
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
<div class="default-form contact-form">
<form method="post" action="" id="contactForm" novalidate="novalidate">
<fieldset>
<div class="form-group">
<input type="text" name="contactName" id="contactName" value="" placeholder="Complete Name" minlength="4" required="" aria-required="true">
</div>
<div class="form-group">
<input type="email" name="contactEmail" id="contactEmail" value="" placeholder="Your Email" required="" aria-required="true">
</div>
<div class="form-group">
<input placeholder="Phone" type="text" id="phoneNumber" name="phoneNumber" required="" aria-required="true">
<script type="text/javascript">
$('#phoneNumber').inputmask("(999) 999-9999");
</script>
</div>
<div class="form-group">
<input type="text" name="contactSubject" id="contactSubject" value="" placeholder="Subject" required="" aria-required="true">
</div>
<div class="form-group">
<input type="text" name="contactMessage" id="contactMessage" value="" placeholder="Your Message" required="" aria-required="true">
</div>
<div class="form-group">
<button class="full-width btn btn--primary">Submit</button>
<div class="submit-loader">
<div class="text-loader">Sending...</div>
<div class="s-loader">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
</div>
</fieldset>
</form>
<!-- contact-warning -->
<div class="message-warning">
Something went wrong. Please try again.
</div>
<!-- contact-success -->
<div class="message-success">
Your message was sent, thank you!<br>
</div>
</div>
<!--End Default Form-->【问题讨论】：
标签： javascript php jquery html