php - PHPメールフォームのエラーを同じページに出力する

Question

これはライブの商用プロジェクトのためのものなので、どんな助けも大歓迎です.

私はPHPとjQuery / Javascriptに比較的慣れていないので、私がすでに持っているもののほとんどがあなたの専門家が考えるものである場合は許してください...がらくた:)

私のウェブサイトは HTML のみで、PHP メールフォームを使用するコンタクトフォームがあります (コンタクトフォームは HTML ドキュメントのままです)。
jQuery Validate を使用して、満足できるレベルで機能するクライアント側の検証を実装しました。
また、PHP フォームスクリプト内にサーバー側の検証とサニタイズも実装しました。

クライアント側とサーバー側の検証は正しく連携しているように見えますが、サーバー側の PHP スクリプトによって生成されたエラーメッセージを表示する方法に頭を悩ませています。

クライアントスライドの jQuery 検証は問題なく動作します。contact.html ページに、正しいエラーメッセージを表示するエラーメッセージコンテナー DIV があります。ただし、サーバー側では、送信を押すと、contact-form.php がブラウザーに読み込まれ、エラーメッセージ (または成功メッセージ) が空白のページに表示されます。

私が望むのは、contact-form.php ファイルからの出力エラーメッセージを、実際にページを離れることなく、jQuery と同じエラーコンテナー DIV に表示することです。

私がこれをやろうとしている理由は - ユーザーが JavaScript を有効にしていない場合、jQuery バリデーターは明らかに機能しません - しかし、それでも jQuery 処理と同じくらい洗練された PHP エラー処理が必要です。

時間を割いて読んでアドバイスしていただきありがとうございます。

これが私のコードです。

お問い合わせフォーム.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 つのフォームがあります。1 つはメッセージフォームで、もう 1 つはコールバックリクエストフォームです。これらは jQuery タブにあります。1 つのフォームだけに HTML マークアップを含めました。

ご覧のとおり、jQuery 検証エラーメッセージが表示される errorContainer DIV と、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  -->

score 0 · Accepted Answer

私が通常行うことは次のとおりです。

クライアント側で検証する
すべて問題ない場合は、サーバーを確認してください。フォームが同じページに生成される前に、サーバー検証スクリプトを含めます。
真の可能性があるで始まるブール値のフラグを設定します。
エラーが発生した場合は、ブールフラグを false に変更します。
ブール値フラグが true の場合、適切なページにリダイレクトされるか、フォームが再度表示されます。
成功または失敗の両方でフォームが表示される場合は、ブール値フラグに応じて、エラー div を css プロパティで表示しないように設定します。このプロパティは、後で検証中に javascript から変更できます。

これは単純な一般的な考え方です。

php - PHPメールフォームのエラーを同じページに出力する

1 に答える 1

Related

Reference