PHP。 错误更改文本区域颜色而无需重定向的联系表

Question

I have contact form, which successfully send message to my email. But when user enter invalid data (for example not entered email) user redirecting to send_form_email.php and errors are shown "Please enter email etc..." I need to make that If error occurred, error should be displayed in the same window without redirecting and input field should become "red" color (as I understand need to change css style, but how to do It correctly?).

Here is my contact form:

---

Here is how error looks like now:

---

Here is how error should be:

---

This is part of my contact form, how "e-mail" field looks like:

<form name="contactform" class="form_row" method="post" action="send_form_email.php">

<table width="450px">
    <tr>

     <td valign="top">

      <label for="email">El. paštas: *</label>

     </td>

     <td valign="top">

      <input  type="text" class="contact_input" name="email" maxlength="80" size="30">

     </td>

    </tr>

Here is contact_input style:

input.contact_input{
width:225px;
height:18px;
float:left;
border:1px #d1e0ee solid;
background-color:#fee9a1;
color: #000;
}

And here is part where redirecting after error occurred.

function died($error) {


    echo "We are very sorry, but there were error(s) found with the form you submitted. ";

    echo "These errors appear below.<br /><br />";

    echo $error."<br /><br />";

    echo "Please go back and fix these errors.<br /><br />";

    die();

}

UPDATE

This is my full send_form_email.php

<?php


    if(isset($_POST['email'])) {



        // EDIT THE 2 LINES BELOW AS REQUIRED

        $email_to = "myMail@gmail.com";

        $email_subject = "Message from myPage";





        function died($error) {

                session_start();
        $_SESSION['error'] = $error;
        header('Location: contact.php');
        die();


        }


     if (!is_valid_email($_POST['email'])) {
        $error['email'] = 'email should be entered';
    }
        // validation expected data exists

        if(!isset($_POST['name']) ||

            !isset($_POST['email']) ||

            !isset($_POST['telephone']) ||

            !isset($_POST['comments'])) {

            died('We are sorry, but there appears to be a problem with the form you submitted.');       

        }



        $name = $_POST['name']; 

        $email_from = $_POST['email']; // required

        $telephone = $_POST['telephone']; // not required

        $comments = $_POST['comments']; // required



        $error_message = "";

        $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

      if(!preg_match($email_exp,$email_from)) {

        $error_message .= 'The Email Address you entered does not appear to be valid.<br />';

      }

        $string_exp = "/^[A-Za-z .'-]+$/";

      if(!preg_match($string_exp,$name)) {

        $error_message .= 'The First Name you entered does not appear to be valid.<br />';

      }


      if(strlen($comments) < 2) {

        $error_message .= 'The Comments you entered do not appear to be valid.<br />';

      }

      if(strlen($error_message) > 0) {

        died($error_message);

      }

        $email_message = "Pranešimas apačioje.\n\n";



        function clean_string($string) {

          $bad = array("content-type","bcc:","to:","cc:","href");

          return str_replace($bad,"",$string);

        }



        $email_message .= "Vardas: ".clean_string($name)."\n";

        $email_message .= "El. paštas: ".clean_string($email_from)."\n";

        $email_message .= "Tel. Nr.: ".clean_string($telephone)."\n";

        $email_message .= "Pranešimas: ".clean_string($comments)."\n";





    // create email headers

    $headers = 'From: '.$email_from."\r\n".

    'Reply-To: '.$email_from."\r\n" .

    'X-Mailer: PHP/' . phpversion();

    @mail($email_to, $email_subject, $email_message, $headers);  

    ?>



    <!-- include your own success html here -->



    Thank you for contacting us. We will be in touch with you very soon.



    <?php

    }

    ?>

Answer 1

You can add client side validation using jQuery and submit your form using Ajax

Assuming you html form like this

<form id="myForm">    
<table>
    <tr>
         <td colspan="2"><div id="result"></div></td>
    </tr>
    <tr>
         <td valign="top"><label for="email">El. pa?tas: *</label></td>
         <td valign="top">
              <input id="fEmail"  type="text" class="contact_input" name="email" maxlength="80" size="30">
         </td>
    </tr>
    <tr>
         <td valign="top"></td>
         <td valign="top">
              <input id="btnSend" name="Send" type="button" value="Send"/>
             </td>
    </tr>
 </table>
 </form>

and add the following css to your stylesheet

.input-error
{
    background-color: #AA0000 !important;
}

and the following jQuery script

<script type="text/javascript">
       $('.error').hide();
       $('#btnSend').click(function () {
            $('.error').hide();

            var email = $("input#fEmail").val();

            if (email == "") {
                $("input#fEmail").focus();
                $("input#fEmail").addClass("input-error");
                return false
            }

            $.ajax({
                        type: "POST", 
                        url: "send_form_email.php", 
                        data: $('#myForm').serialize(), 
                        success: function (response) {
                            $('#result').html("<div class='success'>" + response + "</div>")
                        }, failed: function (response) {
                            $('#result').html("<div class='error'>" + response + "</div>");
                        }
            });
            return false
        });

Answer 2

If you want use server side validation using PHP:

First of all you need to assign error values when checking posted values for example :

if (!is_valid_email($_POST['email'])) {
    $error['email'] = 'email should be entered';
}

Then if there is any errors you should pass $error to form page. For example using session :

function died($error) {
    session_start();
    $_SESSION['error'] = $error;
    header('Location: form_page.php');
    die();
}

Then in your form page :

session_start();
if (isset($_SESSION['error']['email'])) {
    echo '<input  type="text" class="contact_input error" name="email" maxlength="80" size="30" value="' . $_SESSION['error']['email'] . '">';
} else {
    // empty input
}
session_destroy();

css :

.error
{
    background-color: red !important;
}

EDIT

send_form_email.php should look like this :

<?php
if (isset($_POST['email'])) {
    $email_to = "myMail@gmail.com";
    $email_subject = "Message from myPage";

    if (!isset($_POST['name']) ||
        !isset($_POST['email']) ||
        !isset($_POST['telephone']) ||
        !isset($_POST['comments'])) {

        $error['form'] = 'We are sorry, but there appears to be a problem with the form you submitted.';
    }

    $name = $_POST['name'];
    $email_from = $_POST['email']; // required
    $telephone = $_POST['telephone']; // not required
    $comments = $_POST['comments']; // required

    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

    if (!preg_match($email_exp, $email_from)) {
        $error['email'] = 'The Email Address you entered does not appear to be valid.';
    }

    $string_exp = "/^[A-Za-z .'-]+$/";
    if (!preg_match($string_exp, $name)) {
        $error['name'] = 'The First Name you entered does not appear to be valid.';
    }


    if (strlen($comments) < 2) {
        $error['comment'] = 'The Comments you entered do not appear to be valid.';
    }

    if (count($error) > 0) {
        died($error);
    }

    $email_message = "Pranešimas apačioje.\n\n";

    function clean_string($string)
    {
        $bad = array("content-type", "bcc:", "to:", "cc:", "href");
        return str_replace($bad, "", $string);
    }

    $email_message .= "Vardas: " . clean_string($name) . "\n";
    $email_message .= "El. paštas: " . clean_string($email_from) . "\n";
    $email_message .= "Tel. Nr.: " . clean_string($telephone) . "\n";
    $email_message .= "Pranešimas: " . clean_string($comments) . "\n";

    // create email headers

    $headers = 'From: ' . $email_from . "\r\n" .
        'Reply-To: ' . $email_from . "\r\n" .
        'X-Mailer: PHP/' . phpversion();

    @mail($email_to, $email_subject, $email_message, $headers);
}

function died($error) {
    session_start();
    $_SESSION['error'] = $error;
    header('Location: contact.php');
    die();
}

This is just part of HTML in contact.php from your question :

<form name="contactform" class="form_row" method="post" action="send_form_email.php">
<?php
session_start();
if (isset($_SESSION['error']['form'])) {
    echo '<span class="error">' . $_SESSION['error']['form'] . '</span>';
}
?>
<table width="450px">
    <tr>
        <td valign="top">
            <label for="email">El. paštas: *</label>
        </td>
        <td valign="top">
<?php
if (isset($_SESSION['error']['email'])) {
    echo '<input  type="text" class="contact_input error" name="email" maxlength="80" size="30" value="' . $_SESSION['error']['email'] . '">';
} else {
    echo '<input  type="text" class="contact_input" name="email" maxlength="80" size="30">';
}
?>
        </td>
    </tr>
<?php
session_destroy(); // THIS SHOULD BE IN THE END OF THE FILE
?>

You should repeat html part to all input fields

Please take your time to understand all this. Sėkmės!