title: HTML Form validation using Javascript / PHP
body: <p>I have set up a basic contact form which emails the form data via PHP. This works fine but I am having trouble intregrating validation script into the code to prevent the form from submitting when no data is entered.</p>
  
  <p>My code so far is:</p>
  
  <p>PHP to Email the data:</p>
  
  <pre><code>&lt;?php  
  //validate 
  if(isset($_POST['submit']))
  {
  $to="email@testemail.com";
  $name=$_REQUEST['name'];
  $email=$_REQUEST['email'];
  $subject="Contact Us";
  $body="Name: $name \n\n Email Address: $email \n\n";
  $sent=mail($to, $subject, $body);
  echo 'Sent'; die;  
  } 
  // 
  ?&gt;
  </code></pre>
  
  <p>JS to post the form:</p>
  
  <pre><code>$(document).ready(function() {
  $("#form1").validate({
      submitHandler: function() {
          //submit the form
  $.post("&lt;?php echo $_SERVER[PHP_SELF]; ?&gt;", //post
              $("#form1").serialize(), 
              function(data){
                //if message is sent
                if (data == 'Sent') {
                  $("#message").fadeIn(); //show confirmation message
  
              }
              //
          });
          return false; //don't let the page refresh on submit.
      }
  }); //validate the form
  });
  </code></pre>
  
  <p>HTML Form</p>
  
  <pre><code>&lt;div id="contact-form"&gt;
  &lt;form action="" method="post" enctype="multipart/form-data" name="form1" id="form1"&gt; 
  
  &lt;input type="text" id="name" name="name"/&gt;
  &lt;input type="text" id="email" name="email"/&gt;  
  &lt;input name="submit" type="submit" title="Submit" class="submit_go" value="Submit"/&gt;
  
  &lt;/form&gt;
  &lt;div id="message"&gt;Thank you for your message&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried integrating the below validation script but this doesn't prevent the form from submitting?</p>
  
  <p>Validation Script</p>
  
  <pre><code> function leftValue(e, t, n) {
  $(this).text(t.parent()[0].style.left)
  }
  $(document).ready(function() {
  required = ["name", "email"];
  email = $("#email");
  errornotice = $("#error");
  emptyerror = "Required Field";
  emailerror = "Required Field";
  $("#form1").submit(function() {
      for (i = 0; i &lt; required.length; i++) {
          var e = $("#" + required[i]);
          if (e.val() == "" || e.val() == emptyerror) {
              e.addClass("form-error");
              e.val(emptyerror);
              errornotice.fadeIn(750)
          } else {
              e.removeClass("form-error")
          }
      }
      if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-  Z0-9]{2,4})+$/.test(email.val())) {
          email.addClass("form-error");
          email.val(emailerror)
      }
      if ($(":input").hasClass("form-error")) {
          return false
      } else {
          errornotice.hide();
          return true
      }
  });
  $(":input").focus(function() {
      if ($(this).hasClass("form-error")) {
          $(this).val("");
          $(this).removeClass("form-error")
      }
  })
  });
  </code></pre>