这是一个实时商业项目，因此非常感谢任何帮助。
我对 PHP 和 jQuery/Javascript 比较陌生，所以如果我已经拥有的大部分内容是你们专家认为的内容，请原谅我……废话 :)
- 我的网站只有 HTML 和一个使用 PHP 邮件表单的联系表单（联系表单仍然在 HTML 文档上）。
- 使用 jQuery Validate，我已经实现了客户端验证，它可以达到我满意的水平。
- 我还在 PHP 表单脚本中实现了服务器端验证和清理。
虽然客户端和服务器端验证似乎可以正常工作，但我在如何显示服务器端 PHP 脚本生成的错误消息方面遇到了障碍。
客户端幻灯片 jQuery 验证工作正常 - 我在 contact.html 页面上有一个错误消息容器 DIV，它显示正确的错误消息；但是，对于服务器端 - 当我点击提交时，它会在浏览器中加载 contact-form.php 并在空白页面上显示错误消息（或成功消息）。
我想要的是来自contact-form.php 文件的任何输出错误消息都显示在与jQuery 相同的错误容器DIV 中，而无需实际离开页面。
我尝试这样做的原因是 - 如果用户没有启用 javascript，jQuery 验证器显然不会工作 - 但我仍然需要 PHP 错误处理与 jQuery 处理一样优雅。
感谢您花时间阅读和建议。
这是我的代码：
联系表格.php
<?php
$formType = $_POST['formType'] ;
$sender_name = $_POST['name'] ;
$sender_company = $_POST['company'] ;
$sender_email = $_POST['email'] ;
$sender_telephone = $_POST['telephone'] ;
$sender_message = $_POST['message'] ;
// Server Side Validation
// Error Messages
// Name
$errorMsg_Name_Empty = "Please enter your name (cannot be empty). <br />" ; // isEmpty
$errorMsg_Name_Invalid = "Please your name using valid characters only. <br />" ; // Contains illegal characters only
// Email
$errorMsg_Email_Invalid = "Please enter a valid e-mail address. <br />" ;
$errorMsg_Email_Empty = "Please enter your e-mail address (cannot be empty). <br />" ;
// Telephone
$errorMsg_Telephone_Invalid = "Please enter a valid telephone number." ;
$errorMsg_Telephone_Empty = "Please enter your telephone number (cannot be empty). <br />" ;
// Message
$errorMsg_Message = "Please enter a message. Your message should be at least 30 and no more than 3000 characters in length. <br />" ;
// Human
$errorMsg_Human_Incorrect = "You have not answered the simple maths question correctly! <br />" ;
// Callback Date
$errorMsg_callbackDate = "Please enter a valid date for us to call you back on, formatted as dd/mm/yyyy (for example: 31/01/2103). <br />" ;
// Callback Time
$errorMsg_callbackTime = "Please specify a time you would like us to call you back. <br />" ;
// Input: Name
if ( $sender_name != "") {
$sender_name = substr(filter_var( $sender_name, FILTER_SANITIZE_STRING), 0,49) ;
if ( $sender_name == "" ) {
$errors .= $errorMsg_Name_Invalid ;
}
} else {
$errors .= $errorMsg_Name_Empty ;
}
// Input: Company
if ( $sender_company != "") {
$sender_company = substr(filter_var( $sender_company, FILTER_SANITIZE_STRING),0,49);
}
// Input: Email
if ( $sender_email != "") {
$email_temp = filter_var( $sender_email, FILTER_SANITIZE_EMAIL);
if (!filter_var( $email_temp, FILTER_VALIDATE_EMAIL )) {
$errors .= $errorMsg_Email_Invalid ;
}
} else {
$errors .= $errorMsg_Email_Empty ;
}
// Input: Telephone
if ( $sender_telephone != "") {
$sender_telephone = filter_var($sender_telephone, FILTER_SANITIZE_NUMBER_INT);
if ( strlen ( $sender_telephone ) < 11 || strlen ( $sender_telephone ) > 12 ) {
$errors .= $errorMsg_Telephone_Invalid ;
}
} else {
$errors .= $errorMsg_Telephone_Empty ;
}
// Input: Message
if ( $sender_message != "") {
$sender_message = filter_var($sender_message, FILTER_SANITIZE_STRING);
if ($sender_message == "") {
$errors .= $errorMsg_Message ;
} elseif ( strlen ($sender_message) < 30 || strlen ($sender_message) > 3000 ) {
$errors .= $errorMsg_Message ;
}
} else {
$errors .= $errorMsg_Message ;
}
// Human
if ($formType == "Message") {
$human = $_POST['human_message'] ;
} elseif ( $formType == "Callback") {
$human = $_POST['human_callback'] ;
} ;
$human_correctAnswer = '12' ;
// Input: Human
if ( $human != $human_correctAnswer) {
$errors .= $errorMsg_Human_Incorrect ;
}
// Callback Specific
// If form type is "Callback", collect time/date input fields.
if ( $formType == "Callback" ) {
$callback_date = $_POST['callback_date'] ;
$callback_time = $_POST['callback_time'] ;
//Callback date
if ( $callback_date != "" ) {
list ($day,$month,$year) = explode ("/" ,$callback_date );
if ( (is_numeric($day)) || (is_numeric($month)) || (is_numeric($year)) ) {
if (!checkdate($month, $day, $year))
$errors .= $errorMsg_callbackDate ;
} else {
$errors .= $errorMsg_callbackDate ;
}
} else {
$errors .= $errorMsg_callbackDate ;
} ;
//Callback Time
if ( $callback_time == "" ) {
$errors .= $errorMsg_callbackTime ;
}
}
// END Callback Specific
// If there are no errors - send the form.
if (!$errors) {
$sender_ipAddress = $_SERVER['REMOTE_ADDR'];
$sender_browser = $_SERVER['HTTP_USER_AGENT'];
// E-mail headers
$recipient_email = "hello@mywebsite.com" ;
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html; charset: utf8" . "\r\n";
$headers .= "From: My Website\r\n";
$headers .= 'Reply-To: no-reply@mywebsite.com' . "\r\n" ;
// Setting the e-mail subject
if ( $formType == "Message" ) {
$subject = "Message from the My website." ;
} else {
$subject = "Callback request from the My website." ;
};
// For database scripting - replace new-line html with carriage return character - Array
// Placeholders for array
$sender_message_placeholders = array("\n") ;
//Replace Values for array
$sender_message_replaceValues = array("¶") ;
// $sender_message stripped of new-lines, and replaced with nc-characters.
$sender_message_stripped = str_replace($sender_message_placeholders, $sender_message_replaceValues, $sender_message) ;
// Writing the e-mail body.
if ( $formType == "Message") {
$emailBody = "
<style type \"text/css\">
body { font-family: Helvetica, Arial ; font-size: 16px ; line-height: 20px ; color: #5e5e5e }
h1 { font-size: 42px ; line-height: 42px ; color: #c1c1c1 }
div.section { padding: 12px ; margin-bottom: 8px ; background-color: #f7f7f7 ; border: 1px solid #c8c8c8 }
div.part { margin-bottom: 8px ; 1border: 1px solid blue }
div.part:last-child { margin-bottom: 0 }
label { margin: 0 ; font-size: 13px ; line-height: 20px ; font-weight: bold ; color: #80a553 }
p { margin: 0 }
p.input-field#sender-message { white-space: pre-line }
div#dbImport { color: #a1a1a1!important }
div#dbImport p { font-size: 12px!important ; line-height: 14px ; white-space: normal!important }
</style>
</head>
<body>
<html>
<h1>Message</h1>
<p class=\"input-field\" style=\"margin-bottom:12px\">A message has been sent from Mywebsite. The message is as follows:</p>
<div class=\"section\">
<div class=\"part\">
<label>Contact Form Type:</label>
<p class=\"input-field\">$formType</p>
</div>
</div>
<div class=\"section\">
<div class=\"part\">
<label>Name:</label>
<p class=\"input-field\">$sender_name</p>
</div><!-- !.part -->
<div class=\"part\">
<label>Company:</label>
<p class=\"input-field\">$sender_company</p>
</div><!-- !.part -->
<div class=\"part\">
<label>E-mail:</label>
<p class=\"input-field\">$sender_email</p>
</div><!-- !.part -->
<div class=\"part\">
<label>Telephone:</label>
<p class=\"input-field\">$sender_telephone</p>
</div><!-- !.part -->
</div><!-- !.section -->
<div class=\"section\">
<div class=\"part\">
<label>Message:</label>
<p class=\"input-field\" id=\"sender-message\">$sender_message</p>
</div><!-- !.part -->
</div><!-- !.section -->
<div class=\"section\" id=\"visitor-info\">
<div class=\"part\">
<label>Sender IP Address:</label>
<p class=\"input-field\"><a href=\"http://network-tools.com/default.asp?prog=express&host=$sender_ipAddress\">$sender_ipAddress</a></p>
</div><!-- !.part -->
<div class=\"part\">
<label>Sender Web Browser:</label>
<p class=\"input-field\">$sender_browser</p>
</div><!-- !.part -->
</div><!-- !.section -->
<div id=\"dbImport\">
<p style=\"font-weight:bold\">IMPORTDB DATA</p>
<p>NAME/COMPANY/EMAIL/TELEPHONE/MESSAGE/CALLBACK-DATE/CALLBACK-TIME</p>
<p>#begin#$sender_name#$sender_company#$sender_email#$sender_telephone#$sender_message_stripped#end</p>
</div>
</body>
</html>
" ;
} else {
$emailBody = "
<head>
<style type \"text/css\">
body { font-family: Helvetica, Arial ; font-size: 16px ; line-height: 20px ; color: #5e5e5e }
h1 { font-size: 42px ; line-height: 42px ; color: #c1c1c1 }
div.section { padding: 12px ; margin-bottom: 8px ; background-color: #f7f7f7 ; border: 1px solid #c8c8c8 }
div.section#callback-details { background-color: #f8e0e0 }
div.section#callback-details label { color: #df5c5c }
div.part { margin-bottom: 8px }
div.part:last-child { margin-bottom: 0 }
label { margin: 0 ; font-size: 13px ; line-height: 20px ; font-weight: bold ; color: #80a553 }
p { margin: 0 }
p.input-field#sender-message { white-space: pre-line }
div#dbImport { color: #a1a1a1!important }
div#dbImport p { font-size: 12px!important ; line-height: 19px ; white-space: normal!important }
</style>
</head>
<body>
<html>
<h1>Callback Request</h1>
<p class=\"input-field\" style=\"margin-bottom:12px\">A callback request has been sent from mywebsite. The callback details are as follows:</p>
<div class=\"section\">
<div class=\"part\">
<label>Contact Form Type:</label>
<p class=\"input-field\">$formType</p>
</div>
</div>
<div class=\"section\" id=\"callback-details\">
<div class=\"part\">
<label>Callback Date:</label>
<p class=\"input-field\">$callback_date</p>
</div><!-- !.part -->
<div class=\"part\">
<label>Callback Time:</label>
<p class=\"input-field\">$callback_time</p>
</div><!-- !.part -->
</div><!-- !.section -->
<div class=\"section\">
<div class=\"part\">
<label>Name:</label>
<p class=\"input-field\">$sender_name</p>
</div><!-- !.part -->
<div class=\"part\">
<label>Company:</label>
<p class=\"input-field\">$sender_company</p>
</div><!-- !.part -->
<div class=\"part\">
<label>E-mail:</label>
<p class=\"input-field\">$sender_email</p>
</div><!-- !.part -->
<div class=\"part\">
<label>Telephone:</label>
<p class=\"input-field\">$sender_telephone</p>
</div><!-- !.part -->
</div><!-- !.section -->
<div class=\"section\">
<div class=\"part\">
<label>Message:</label>
<p class=\"input-field\" id=\"sender-message\">$sender_message</p>
</div><!-- !.part -->
</div><!-- !.section -->
<div class=\"section\" id=\"visitor-info\">
<div class=\"part\">
<label>Sender IP Address:</label>
<p class=\"input-field\"><a href=\"http://network-tools.com/default.asp?prog=express&host=$sender_ipAddress\">$sender_ipAddress</a></p>
</div><!-- !.part -->
<div class=\"part\">
<label>Sender Web Browser:</label>
<p class=\"input-field\">$sender_browser</p>
</div><!-- !.part -->
</div><!-- !.section -->
<div id=\"dbImport\">
<p style=\"font-weight:bold\">IMPORTDB DATA</p>
<p>NAME/COMPANY/EMAIL/TELEPHONE/MESSAGE/CALLBACK-DATE/CALLBACK-TIME</p>
<p>#begin#$sender_name#$sender_company#$sender_email#$sender_telephone#$sender_message_stripped#$callback_date#$callback_time#end</p>
</div>
</body>
</html>
" ;
} ;
// End e-mail bodies
/* Send the message using mail() function */
mail($recipient_email, $subject, $emailBody, $headers) ;
// The message to display in the contact form success div
if ( $formType == "Message") {
print "
<h4>Your message has been sent. Thank you.</h4>
<hr>
<p>Someone will get back to you very shortly. We aim to respond to all messages within 24 hours. If your enquiry is super-duper-urgent, why not give us a ring?</p>
" ;
} else {
print "
<h4>Your request has been sent. Thank you.</h4>
<hr>
<h5>A note about our callback service.</h5>
<p>Sometimes life throws you a curve-ball that really mucks up your plans.</p>
<p>In the event that we encounter one of said curve-balls and we're unable to callback when you requested, we will, where possible, get in touch and make arrangements for us
to call back at another time convenient to you.</p>" ;
} ;
// end 'if there are no errors'
} else { // if there are errors with the users inputs
echo '
There was a problem with the information you have tried to submit:
<div style="color: red ; font-size: 22px ; line-height: 28px">' . $errors . '<br/></div>
Please go back, check the information and try again.';
}
?>
contact.html 文件 请注意：在同一页面上实际上有 2 个表单——一个是消息表单，一个是回调请求表单——它们位于 jQuery 选项卡上。我只为一种表单包含了 HTML 标记。
正如您所看到的，有一个 errorContainer DIV，它是 jQuery 验证错误消息出现的地方，我希望在其中显示从 PHP 脚本生成的错误消息。
<form id="form-callback" method="post" action="contact-form.php" class="clearfix">
<input name="formType" id="formType" value="Callback">
<div id="errorContainer-callback" class="errorContainer">
<b>Oops... it looks like there is a problem with the data you have entered into the form. Please correct the following errors:</b>
<ul />
</div><!-- !#errorContainer-callback -->
<!-- BEGIN 4 INPUT FIELDS -->
<div id="input-fields">
<div id="name-company">
<label>Name</label>
<input name="name" tabindex="1">
<label>Company</label>
<input name="company" tabindex="2">
</div><!-- ! #name-company -->
<div id="email-telephone">
<label>Email</label>
<input name="email" tabindex="3">
<label>Telephone</label>
<input name="telephone" tabindex="4">
</div><!-- ! #email-telephone -->
</div><!-- ! #input-fields -->
<!-- BEGIN MESSAGE CELL -->
<div id="message">
<label>Tell us a little about what you'd like talk about when we call you back.</label>
<textarea name="message" tabindex="5"></textarea>
</div><!-- ! #message -->
<div class="clearfix"></div>
<!-- BEGIN Bottom of Form (Date/Time/Human/Button) -->
<div id="end">
<!-- BEGIN DATE -->
<div id="cell1" class="cell">
<label>When would you like us to get back to you?</label>
<div>
<input placeholder="Date" name="callback_date" type="date" id="callback-date" tabindex="6">
</div><!-- ! date input container -->
<!-- BEGIN CELL-TIME -->
<div>
Time
<select id="callback-time" name="callback_time" tabindex="7">
<option value="" selected="selected"></option>
<option value="0900-1100">09:00-11:00</option>
<option value="1100-1300">11:00-13:00</option>
<option value="1300-1500">13:00-15:00</option>
<option value="1500-1700">15:00-17:00</option>
</select>
</div><!-- ! subcell -->
</div><!-- ! #cell1 -->
<!-- BEGIN CELL-HUMANCHECK -->
<div id="cell2" class="cell human-check">
<label><b> What is 3 + 9</b></label>
<input id="human-result-callback" class="human" name="human_callback" type="number" maxlength="2" tabindex="8" />
</div><!-- ! #cell2 .cell -->
<!-- BEGIN CELL-BUTTON -->
<div id="cell3" class="cell">
<input class="button" id="submit" name="submit" type="submit" value="Send Your Request">
</div><!-- ! #cell3 .cell -->
</div><!-- ! #end -->
</form><!-- ! form#form-callback -->