Email Form when not filled out

Question

I am trying to modify an email form when it's not filled out properly, but I don't understand how to do it in an easy way.

Right now it works like this:

• If the user types in everything correct, the user is sent to send_form_email.php which has alot of code and works properly.

• If the user types in something wrong, the user is sent to a blank version of send_form_email.php which just has the errors.

I want to change the last one so the user gets message right away if he miss something, and he is unable to push "send". Maybe change the box-color to red and so forth.

Could you guys help me out?

Thanks.

The form:

<div id="message">
            <form name="contactform" method="post" action="send_form_email.php">
                <table width="450px">
                    <tr>
                        <td valign="top">
                            <label for="first_name">Fornavn</label></br>
                        </td>
                        <td valign="top">
                            <input type="text" name="first_name" maxlength="50" size="30">
                        </td>
                    </tr>

                    <tr>
                        <td valign="top">
                            <label for="last_name">Etternavn</label></br>
                        </td>
                        <td valign="top">
                            <input type="text" name="last_name" maxlength="50" size="30">
                        </td>
                    </tr>

                    <tr>
                        <td valign="top">
                            <label for="email">E-post</label></br>
                        </td>
                        <td valign="top">
                            <input type="text" name="email" maxlength="80" size="30">
                        </td>            
                        </tr>

                    <tr>
                        <td valign="top">
                            <label for="comments">Melding</label></br>
                        </td>
                        <td valign="top">
                            <textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="2">
                        <input type="submit" value="Submit">
                        </td>
                    </tr>
                </table>
            </form>
        </div>

send_form_email.php:

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


    $email_to = "mymail@gmail.com";
    $email_subject = "Melding fra nettsiden"; 

    function died($error) {
        echo "Sorry. Following errors appeared: <br /> ";
        echo $error."<br /><br />";
        die();
    }

    if(!isset($_POST['first_name']) ||
        !isset($_POST['last_name']) ||
        !isset($_POST['email']) ||
        !isset($_POST['comments'])) {
        died('Beklager, men det er noen feil med meldingen.');       
    }

    $first_name = $_POST['first_name']; 
    $last_name = $_POST['last_name'];
    $email_from = $_POST['email'];
    $comments = $_POST['comments'];

    $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 .= 'Ugyldig e-post adresse.<br />';
  }

  if($first_name != '') {
      $error_message .= "Fornavn er ikke fyllt ut";
  }

  if($last_name != '') {
      $error_message .= "Etternavn er ikke fyllt ut";
  }

  if(strlen($comments) < 2) {
    $error_message .= 'Meldingen er for kort.<br />';
  }

  if(strlen($error_message) > 0) {
    died($error_message);
  }

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

// E-post melding
    $email_message .= "".clean_string($comments)."\n\n";
    $email_message .= "Mvh"."\n";
    $email_message .= "".clean_string($first_name)." ".clean_string($last_name);
    $email_message .= ""."\n";
    $email_message .= "".clean_string($email_from);
    $email_message .= ""."\n";

// E-post 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);  

?>

... The rest of send_form_email has code that appears if the form is correct filled out... (This part works)

Answer 1

You can apply two types of validation

• HTML 5 Validation or Javascript/Jquery (client side).
• Server Side validation

Here is an example of HTML 5 validation using required with every <input>

Example:

<input type="text" name="first_name" maxlength="50" required="required" size="30">

Use type="email" for email input field

Example:

<input type="email" name="email" required="required" maxlength="80" size="30">

server side validation is as follows

if(isset($_POST['first_name']) && !empty($_POST['first_name'])
   && isset($_POST['last_name']) && !empty($_POST['last_name'])
   && isset($_POST['email']) && !empty($_POST['email'])
   && isset($_POST['comments']) && !empty ($_POST['comments'])
   )
    {
           //perform the task       
    }
    else{
        echo 'You have not filled all the fields pealse go back and fill all the forms';
    //redirect the user to the form or display an erro massage
    }