将PHP邮件表单错误输出到同一页面 [英] Outputting PHP mail form errors to same page

查看：121
本文介绍了将PHP邮件表单错误输出到同一页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



我对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处理一样优雅。 / p>

感谢您花时间阅读并提供建议。



以下是我的代码：

contact-form.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']; 
 
 //服务器端验证
 //错误消息
 //名称
 $ errorMsg_Name_Empty =请输入您的姓名（不能为空）。< br / >中; // isEmpty 
 $ errorMsg_Name_Invalid =请仅使用有效字符的名称。< br /> ; //仅包含非法字符
 //电子邮件
 $ errorMsg_Email_Invalid =请输入一个有效的电子邮件地址。< br /> ; 
 $ errorMsg_Email_Empty =请输入您的电子邮件地址（不能为空）。< br /> ; 
 //电话
 $ errorMsg_Telephone_Invalid =请输入一个有效的电话号码。 ; 
 $ errorMsg_Telephone_Empty =请输入您的电话号码（不能为空）。< br /> ; 
 //消息
 $ errorMsg_Message =请输入一条消息，消息长度不得超过30个字符，长度不得超过3000个字符。< br /> ; 
 // Human 
 $ errorMsg_Human_Incorrect =你还没有正确回答简单的数学问题！< br /> ; 
 //回拨日期
 $ errorMsg_callbackDate =请输入我们回电的有效日期，格式为dd / mm / yyyy（例如：31/01/2103）。< br />中; 
 //回拨时间
 $ errorMsg_callbackTime =请指定一个时间，您希望我们给您回电。< br /> ; 
 
 
 $ b //输入：名称
 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; 
} 
 
 //输入：公司
 if（$ sender_company！=）{
 $ sender_company = substr（filter_var（$ sender_company，FILTER_SANITIZE_STRING），0 ，49）; （$ 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; 
 
 
 $ b //输入：电话
 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; 
} 
 
 //输入：消息
 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'; 
 
 //输入：Human 
 if（$ human！= $ human_correctAnswer）{
 $ errors。= $ errorMsg_Human_Incorrect; 
} 
 //特定回调
 //如果表单类型为回叫，则收集时间/日期输入字段。 
 if（$ formType ==Callback）{
 $ callback_date = $ _POST ['callback_date']; 
 $ callback_time = $ _POST ['callback_time']; 
 $ b $ //回调日期
 if（$ callback_date！=）{
 list（$ day，$ month，$ year）= explode（/，$ callback_date ）; （$日元，$日元））||（is_numeric（$月））||（is_numeric（$年）））{
 if（！checkdate（$ month，$ day，$ year ））
 $ errors。= $ errorMsg_callbackDate; 
} else {
 $ errors。= $ errorMsg_callbackDate; 
} 
} else {
 $ errors。= $ errorMsg_callbackDate; 
}; 
 
 //回调时间
 if（$ callback_time ==）{
 $ errors。= $ errorMsg_callbackTime; 
} 
 
} 
 // END回调具体
 
 
 //如果没有错误 - 发送表单。 
 if（！$ errors）{
 
 $ sender_ipAddress = $ _SERVER ['REMOTE_ADDR']; 
 $ sender_browser = $ _SERVER ['HTTP_USER_AGENT']; 
 
 //电子邮件标题
 $ recipient_email =hello@mywebsite.com; 
 $ headers =MIME-Version：1.0。 \r\\\
; 
 $ headers。=Content-type：text / html; charset：utf8。 \r\\\
; 
 $ headers。=From：My Website \r\\\
; 
 $ headers。='Reply-To：no-reply@mywebsite.com'。 \r\\\
; 
 
 //设置电子邮件主题
 if（$ formType ==Message）{
 $ subject =来自我的网站的消息。 ; 
} else {
 $ subject =来自我的网站的回拨请求。 ; 
}; 
 
 //对于数据库脚本 - 用换行符替换换行符html  -  Array 
 //阵列占位符
 $ sender_message_placeholders = array（\\\
）; 
 //替换数组
 $ sender_message_replaceValues = array（¶）; 
 // $ sender_message删除换行符，并换成nc字符。 
 $ sender_message_stripped = str_replace（$ sender_message_placeholders，$ sender_message_replaceValues，$ sender_message）; 
 
 //编写电子邮件正文。 
 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：大小;颜色：＃80a553} 
p {margin：0} 
 p.input-field＃sender-message {white-space：pre-line} 
 
 div＃dbImport {颜色：#a 1a1a1！important} 
 div＃dbImport p {font-size：12px！important; line-height：14px;空白：正常！重要} 
< / style> 
< / head> 
 
< body> 
< html> 
 
< h1>讯息< / h1> 
 
 
 
< div class = \section \> 
< div class = \part \> 
< label>联系人表单类型：< / label> 
< p class = \input-field \> $ formType< / p> 
< / div> 
< / div> 
 
< div class = \section \> 
< div class = \part \> 
< label>名称：< / label> 
< p class = \input-field \> $ sender_name< / p> 
< / div><！ - ！.part  - > 
< div class = \part \> 
< label>公司：< / label> 
 
< / div><！ - ！.part  - > 
< div class = \part \> 
< label>电子邮件：< / label> 
< p class = \input-field \> $ sender_email< / p> 
< / div><！ - ！.part  - > 
< div class = \part \> 
< label>电话号码：< / label> 
< p class = \input-field \> $ sender_telephone< / p> 
< / div><！ - ！.part  - > 
< / div><！ - ！.section  - > 
 
< div class = \section \> 
< div class = \part \> 
< label>讯息：< / 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>发件人IP地址：< / label> 
 
< / div><！ - ！.part  - > 
< div class = \part \> 
< label>发件人网页浏览器：< / label> 
< p class = \input-field \> $ sender_browser< / p> 
< / div><！ - ！.part  - > 
< / div><！ - ！.section  - > 
 
< div id = \dbImport \> 
< p style = \font-weight：bold \> IMPORTDB DATA< / 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;颜色：＃5e5e5e} 
 h1 {font-size：42px; line-height：42px;颜色：＃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。部分{margin-bottom：8px} 
 div.part：last-child {margin-bottom：0} 
 
 label {margin：0; font-size：13px; line-height：20px; font-weight：bold;颜色：＃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;空白：正常！重要} 
< / style> 
< / head> 
 
< body> 
< html> 
 
< h1>回拨请求< / h1> 
 
 
 
< div class = \section \> 
< div class = \part \> 
< label>联系人表单类型：< / label> 
< p class = \input-field \> $ formType< / p> 
< / div> 
< / div> 
 
< div class = \section \id = \callback-details\> 
< div class = \part \> 
< label>回拨日期：< / label> 
< p class = \input-field \> $ callback_date< / p> 
< / div><！ - ！.part  - > 
< div class = \part \> 
< label>回拨时间：< / label> 
< p class = \input-field \> $ callback_time< / p> 
< / div><！ - ！.part  - > 
< / div><！ - ！.section  - > 
 
< div class = \section \> 
< div class = \part \> 
< label>名称：< / label> 
< p class = \input-field \> $ sender_name< / p> 
< / div><！ - ！.part  - > 
< div class = \part \> 
< label>公司：< / label> 
 
< / div><！ - ！.part  - > 
< div class = \part \> 
< label>电子邮件：< / label> 
< p class = \input-field \> $ sender_email< / p> 
< / div><！ - ！.part  - > 
< div class = \part \> 
< label>电话号码：< / label> 
< p class = \input-field \> $ sender_telephone< / p> 
< / div><！ - ！.part  - > 
< / div><！ - ！.section  - > 
 
< div class = \section \> 
< div class = \part \> 
< label>讯息：< / 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>发件人IP地址：< / label> 
 
< / div><！ - ！.part  - > 
< div class = \part \> 
< label>发件人网页浏览器：< / label> 
< p class = \input-field \> $ sender_browser< / p> 
< / div><！ - ！.part  - > 
< / div><！ - ！.section  - > 
 
< div id = \dbImport \> 
< p style = \font-weight：bold \> IMPORTDB DATA< / 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> 
 $ b $; 
}; 
 //结束电子邮件正文
 
 
 / *使用mail（）函数发送邮件* / 
 mail（$ recipient_email，$ subject，$ emailBody，$ headers）; 
 
 //在联系表单中显示的消息success div 
 if（$ formType == 消息）{
打印
< h4>您的消息已发送。谢谢。< / h4> 
< hr> 
< p>有人会很快回复您。我们的目标是在24小时内回复所有信息。如果您的询问超级紧急，为什么不给我们一个戒指？< / p> 
; 
} else {
 print
< h4>您的请求已发送。谢谢。< / h4> 
< hr> 
< h5>关于我们的回拨服务的备注。< / h5> 
< p>有时候，生活会给你一个曲线球，真的会让你的计划变得糟糕。< / p> 
 
 
如果我们遇到其中一个曲线球，并且在您请求时无法回拨，我们将尽可能联系并安排我们
}; 
 //如果没有错误，则结束'
 
} else'b $ b在其他时间方便的回电< / p> {//如果用户输入存在错误
 
 echo'
您尝试提交的信息存在问题：
< div style =color：红色; font-size：22px; line-height：28px>'。$ errors。'< br />< / div> 
请返回，检查信息并重试。'; 
} 
？>

contact.html文件
请注意：实际上有两种形式在同一个页面上 - 一个是消息表单，一个是回调请求表单 - 它们在jQuery标签页上。我为一个表单添加了HTML标记。



你可以看到有一个errorContainer DIV，它是jQuery验证错误消息出现的位置，我想从PHP脚本生成的错误消息显示在哪里。

 < form id =form-callbackmethod =postaction =contact-form.phpclass =clearfix> 
< input name =formType id =formTypevalue =回调> 
< div id =errorContainer-callbackclass =errorContainer> 
< b>糟糕了......看起来像是一个问题e您输入到表单中的数据。请更正以下错误：< / b> 
< ul /> 
< / div><！ - ！＃errorContainer-callback  - > 
 <！ -  BEGIN 4 INPUT FIELDS  - > 
< div id =input-fields> 
< div id =name-company> 
< label>名称< / label> 
< input name =nametabindex =1> 
< label>公司< / label> 
< input name =companytabindex =2> 
< / div><！ - ！ ＃name-company  - > 
< div id =email-telephone> 
< label>电子邮件< / label> 
< input name =emailtabindex =3> 
< label>电话< / label> 
< input name =telephonetabindex =4> 
< / div><！ - ！ ＃email-telephone  - > 
< / div><！ - ！ ＃input-fields  - > 
 <！ -  BEGIN MESSAGE CELL  - > 
< div id =message> 
< label>告诉我们一些关于当您给我们打电话时想要说些什么的问题。< / label>