title: How to validate contact form required fields and display the error message accordingly
body: <p>I'm new to PHP. I tried creating a contact form using HTML and PHP. This contact form when submitted will send a mail to receiver.<br>
  <strong>Below is the code the code for the contact form in HTML :</strong> </p>
  
  <pre><code>  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
      &lt;html&gt;
          &lt;head&gt;
  
              &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" /&gt; 
              &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /&gt; 
              &lt;script src="//html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
              &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
              &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/&gt;
              &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.css"/&gt;
              &lt;link rel="stylesheet" type="text/css" href="css/coder.css"/&gt;
              &lt;style  type="text/css"&gt;
      .bg-color{
      background-color:#F9F1E4;
      border-radius:5px;
      margin:5px;
      }
      .row_color{
      border:2px solid #A40F17;
      margin:0px;
      }
      .footer_class{
      background-color:#A40F17;
      height:40px;
      }
      .font_color{
      color:#fff;
      margin-top:5px;
      }
      .navbar-inverse .navbar-nav &gt; .active &gt; a, .navbar-inverse .navbar-nav &gt; .active &gt; a:hover, .navbar-inverse .navbar-nav &gt; .active &gt; a:focus {
          background-color: #A40F17;
          color: #FFFFFF;
      }
      .h_color{
      background-color:#FFFFFF;
      }
      .danger{
      color:#A40F17;
      }
      .h_top{
      margin-top:30px;
      }
      .h_height{
  
      height:173px;
      }
      &lt;/style&gt;
          &lt;/head&gt;
          &lt;body&gt;
              &lt;header&gt;
          &lt;div class="row h_color h_height"&gt;
          &lt;div class="container"&gt;
              &lt;div class="col-lg-12"&gt;
              &lt;div class="col-lg-6"&gt;
              &lt;a href="" class="navbar-brand"&gt;&lt;img class="image-responsive" src="images/logo_rugs.jpg"/&gt;&lt;/a&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;nav class="navbar navbar-inverse"&gt;
                  &lt;div class="container"&gt;
                      &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeader"&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;span class="icon-bar"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;div class="collapse navbar-collapse navHeader"&gt;
                          &lt;ul class="nav navbar-nav navbar-right"&gt;
                              &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="aboutus.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="products.html"&gt;Products&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="gallery.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="active"&gt;&lt;a href="contactus.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/header&gt;
          &lt;div class="container" style="background-color:#fff;"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-12"&gt;
                          &lt;h3&gt;Contact Us&lt;/h3&gt;
                          &lt;div class="col-lg-7 well"&gt;
    &lt;form enctype="multipart/form-data" method="post" name="contactform" id="former" action="contact.php"&gt;
  
                              &lt;h4 style="padding-top:8px;"&gt;Your email address will not be published. Required fields are marked *&lt;/h4&gt;
                                  &lt;label&gt;Name*&lt;/label&gt;&lt;br&gt;
                                  &lt;input class="form-control" style="height:35px;width:230px;border-radius:4px;"type="text" name="text"/&gt;&lt;br&gt;
                                  &lt;label&gt;Phone*&lt;/label&gt;&lt;br&gt;
  
  
              &lt;span&gt;
  
                  &lt;input id="element_4_1" name="element_4_1" class="element text" size="3" maxlength="3" value="" type="text"&gt; -
  
              &lt;/span&gt;
              &lt;span&gt;
                  &lt;input id="element_4_2" name="element_4_2" class="element text" size="4" maxlength="4" value="" type="text"&gt; -
  
              &lt;/span&gt;
              &lt;span&gt;
                  &lt;input id="element_4_3" name="element_4_3" class="element text" size="10" maxlength="10" value="" type="text"&gt;
  
              &lt;/span&gt;
  
      &lt;br&gt;&lt;br&gt;
                                  &lt;label&gt;Email*&lt;/label&gt;&lt;br&gt;
                                  &lt;input class="form-control" style="height:35px;width:230px;border-radius:4px;"type="email" name="text"/&gt;&lt;br&gt;
                                  &lt;label for="input4"&gt;Message&lt;/label&gt;
                                  &lt;textarea name="contact_message" class="form-control" rows="4" id="input4"&gt;&lt;/textarea&gt;
                                  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
                                  &lt;button type="submit" style="margin-left:65px;"class="btn btn-large btn-info"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
                          &lt;/div&gt;
          &lt;script src="http://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;    
  </code></pre>
  
  <p><strong>Below is the code for contact.php which is called when the contactus form is submitted.</strong>  </p>
  
  <pre><code>&lt;?php
  
  extract($_POST, EXTR_OVERWRITE);
  $name=chop($name);
  $phone=chop($element_4_1);
  $phone.=chop($element_4_2);
  $phone.=chop($element_4_3);
  $email=chop($text);
  $message1=chop($contact_message);
  
  if ($name &amp;&amp; $phone &amp;&amp; $email) { 
  
  $headers  = "MIME-Version: 1.0\r\n";
  $headers .= "Content-type: text/plain; charset=iso-8859-1\r\n";
  $headers .= "From: auto-reply\n";
  $recipient= "test@gmail.com";
  
  
  
  $subject="Online Enquiry";
  
  
  $message.="\nName                   : $name\n";
  
   $message.="\nPhone                  : $phone\n";
  
   $message.="\nEmail ID               : $email\n";
  
   $message.="\nMessage                : $message1\n";
  
   //send auto-reply
  $subject_reply="Thank you";
  $message_reply="Thank you for contacting us.";
  mail($email, $subject_reply, $message_reply, $headers);
  
   //Send Mail
  //===========
  if(mail($recipient, $subject, $message, $headers)) {
  
  echo "&lt;meta http-equiv='REFRESH' content='0;url=contactus.html'&gt;";
  }
  }
  else { 
  exit("You have not filled out all the required fields. Please hit your back button and fill out all the required fields.");
  }
  
  ?&gt;
  </code></pre>
  
  <p>The above code works fine. Now, when I submit the form without filling the required fields I get the error after submitting the form in another page
  I want to validate the required fields in such a way that if they are unfilled the error must be shown below the required text field. Suppose Name is not filled, then an error Name is manadatory should be displayed after the text field. How can I do this.</p>