将PHP邮件表单错误输出到同一页面

这是一个活的商业项目，所以任何帮助是非常感谢

我对PHP和jQuery/Javascript比较陌生，所以请原谅我，如果我已经掌握的大部分内容是你们专家认为的。。。废话：）

• 我的网站是HTML，只有一个使用PHP邮件表单的联系人表单（联系人表单仍然在HTML文档中）
• 使用jqueryvalidate，我已经实现了客户端验证，它的工作水平令我满意
• 我还在PHP表单脚本中实现了服务器端验证和清理

虽然客户端和服务器端的验证看起来工作正常，但在如何显示服务器端PHP脚本生成的错误消息方面，我遇到了一个思维障碍

客户端幻灯片jQuery验证工作正常-我在contact.html页面上有一个错误消息容器DIV，它显示正确的错误消息；但是，对于服务器端，当我点击submit时，它会在浏览器中加载contact-form.php，并在空白页上显示错误消息（或成功消息）

我想要的是contact-form.php文件中的任何输出错误消息显示在与jQuery相同的错误容器DIV中，而不实际离开页面

我尝试这样做的原因是——如果用户没有启用javascript，jQuery验证程序显然无法工作——但我仍然需要PHP错误处理与jQuery处理一样优雅

感谢您抽出时间阅读并提出建议

以下是我的代码：

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'] ;

// 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文件 请注意：同一页上实际上有两个表单——一个是消息表单，一个是回调请求表单——它们位于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  -->

哎呀。。。您在表单中输入的数据似乎有问题。请更正以下错误：

名称
单位
电子邮件
电话
当我们给你回电话时，告诉我们你想谈些什么。
您希望我们什么时候回复您？
时间
09:00-11:00
11:00-13:00
13:00-15:00
15:00-17:00
什么是3+9

我通常做的是：

在客户端验证

若一切正常，检查服务器。我在同一页面上生成表单之前包含服务器验证脚本

有一个布尔标志start with可能为true

如果遇到错误，请将布尔标志更改为false

现在，如果布尔标志为true，它将重定向到相应的页面，或者再次显示表单

如果on success或fail都将显示表单，这取决于布尔标志，我将error div设置为not display with css属性，稍后在执行验证时可以从javscript更改该属性

---

这只是一个简单的总体思路。

html表单和php代码是否在同一个文件中

contact form.php

？不，contact form在html文件中，与contact-form.php分开。PHP文件基本上只是做一些简单的工作。因此，如果需要将错误消息返回到jquery使用的同一容器中输出的同一html页面，那么必须在html页面中包含一些PHP代码。正确的做法是使用ajax提交表单并将php输出返回到html页面中的同一个结果容器中，但您是说您需要一个不使用java的页面，并将结果返回到同一个容器中，而使用2个文件和不使用java是不可能的！啊。那么，我是否需要在同一页面上包含html和php代码？那会成为一个php文件吗？i、 e.contact.html会变成contact.php吗？抱歉-正如我所说，我仍然在学习这方面的很多知识。出于兴趣-有人对我现有的代码有任何评论吗，也就是说，基本上可以吗？或者可以做得更好吗？我已经用jquery对客户端进行了验证排序，但我正在尝试