title: validate form before submit php
body: <p>I have a question to ask.</p>
  
  <p>I have a form that the user has to fill up. There are a couple of fields that have restrictions (for example the name can't be empty). The problem is that everytime I press the submit button I get a popup saying that the name can't be empty but it's automatically redirect to an other page. So the question is: How can I modify my code to do the validation before being redirect to the page or chen the user clicks outside or press tab?</p>
  
  <p>In order to achive this Im using PHP, Contact Form 7 and wordpress.
  Here is my code:</p>
  
  <p><strong>php function createAccount.php</strong></p>
  
  <pre><code>&lt;?php 
  require_once('../../../wp-load.php');
  include ('../../../wp-config.php');
  global $wpdb;    
  $nameErr = "";
  if(isset($_POST['next']))
  {
  $name=addslashes($_POST['cName']);
  $surname=addslashes($_POST['cSurname']);
  $email=addslashes($_POST['cEmail']);
  $phone =addslashes($_POST['cPhone']);
  $otherPhone=implode($_POST['cOtherPhone']);
  $languages=implode(' | ', $_POST['cLanguages']);
  $address=addslashes($_POST['cAddress']);
  $neighborhood=$_POST['cNeighborhood'];
  $pswd=addslashes($_POST['cPswd']);
  $service=$_POST['cService'];
  if ($_SERVER["REQUEST_METHOD"] == "POST") {
      if(empty($_POST["cName"])) {
          $message = "wrong answer";
      echo "&lt;script type='text/javascript'&gt;alert('$message');
      &lt;/script&gt;";
  }
  }else{
  
  $wpdb-&gt;insert("Client",array(
  "cName"=&gt;$name,
  "cSurname"=&gt;$surname,
  "cEmail"=&gt;$email,
  "cPhone"=&gt;$phone,
  "cOtherPhone"=&gt;$otherPhone,
  "cLanguages"=&gt;$languages,
  "cAddress"=&gt;$address,
  "cNeighborhood"=&gt;$neighborhood,
  "cPswd"=&gt;$pswd,
  "cService"=&gt;$service
  ));
  print_r("uq");
  }  
  }
   $wpdb-&gt;show_errors();
  ?&gt;
  </code></pre>
  
  <p><strong>Contact form 7 page</strong></p>
  
  <pre><code>&lt;form action="/wp-content/plugins/my-codes/signUp.php" method="post"&gt;
  [contact-form-7 id="422" title="Member Signup"]
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Contact Form</strong></p>
  
  <pre><code>&lt;p&gt;Your Name (required)&lt;br /&gt; &lt;/p&gt;
  [text* cName id:cName]
  
  &lt;p&gt;Your Surname (required)&lt;br /&gt; &lt;/p&gt;
  [text* cSurname id:cSurname]
  
  &lt;p&gt;Your Email (required)&lt;br /&gt;&lt;/p&gt;
  [email* cEmail id:cEmail] 
  
  &lt;label&gt; Your Telephone Number (required)
  [tel* cPhone id:cPhone tel-106 placeholder "123 456 789"] &lt;/label&gt;
  
  &lt;label&gt; Other Telephone Number (required)
  [tel* cOtherPhone id:cOtherPhone tel-106 placeholder "123 456 789"] &lt;/label&gt;
  
  &lt;h3&gt;What languages do your prefer?&lt;/h3&gt;
  &lt;input id=cLanguages type="checkbox" name=cLanguages[] value="English"&gt;
  &lt;use_label_element for="check_14"&gt;English&lt;/use_label_element&gt;
  
  &lt;input id=cLanguages type="checkbox" name=cLanguages[] value="Hebrew"&gt;
  &lt;use_label_element for="check_15"&gt;Hebrew&lt;/use_label_element&gt;
  
  &lt;input id=cLanguages type="checkbox" name=cLanguages[] value="French"&gt;
  &lt;use_label_element for="check_16"&gt;French&lt;/use_label_element&gt;
  
  &lt;input id=cLanguages type="checkbox" name=cLanguages[] value="Spanish"&gt;
  &lt;use_label_element for="check_17"&gt;Spanish&lt;/use_label_element&gt;
  
  &lt;p&gt;Your Address (required)&lt;br /&gt; &lt;/p&gt;
  [text* cAddress id:cAddress]
  
  &lt;select cNeighborhood id:cNeighborhood name=cNeighborhood&gt;
  &lt;option value="Bat Yam"&gt;Bat Yam&lt;/option&gt;
  &lt;option value="Raanana"&gt;Raanana&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;label&gt; Create Password (required)
  [text* cPswd id:cPswd] &lt;/label&gt;
  
  &lt;label&gt; Confirm Password (required)
  [text* cPswd id:cPswd] &lt;/label&gt;
  
  &lt;label&gt; Pick a Service (required)&lt;/label&gt;
  &lt;select cService id:cService name=cService&gt;
  &lt;option value="Babysitter"&gt;Babysitter&lt;/option&gt;
  &lt;option value="Cleaner"&gt;Cleaner&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;input type="submit" name="next"&gt;
  </code></pre>
  
  <p>Any help please? thanks!</p>
  
  <p><strong>UPDATE CONTACT FORM</strong></p>
  
  <pre><code>&lt;form id="commentForm" action="/wp-content/plugins/my-            codes/createAccount.php" method="post"&gt;
  &lt;p&gt;Your Name (required)&lt;br /&gt; &lt;/p&gt;
  [text* cName id:cName]
  
  &lt;p&gt;Your Surname (required)&lt;br /&gt; &lt;/p&gt;
  [text* cSurname id:cSurname]
  
  &lt;p&gt;Your Email (required)&lt;br /&gt;&lt;/p&gt;
  [email* cEmail id:cEmail] 
  
  &lt;label&gt; Your Telephone Number (required)
  [tel* cPhone id:cPhone tel-106 placeholder "123 456 789"] &lt;/label&gt;
  &lt;label&gt; Other Telephone Number (required)
  [tel* cOtherPhone id:cOtherPhone tel-106 placeholder "123 456 789"] &lt;/label&gt;
  
  &lt;h3&gt;What languages do your prefer?&lt;/h3&gt;
  &lt;input id=cLanguages type="checkbox" name=cLanguages[] value="English"&gt;
  &lt;use_label_element for="check_14"&gt;English&lt;/use_label_element&gt;
  
  &lt;input id=cLanguages type="checkbox" name=cLanguages[] value="Hebrew"&gt;
  &lt;use_label_element for="check_15"&gt;Hebrew&lt;/use_label_element&gt;
  
  &lt;input id=cLanguages type="checkbox" name=cLanguages[] value="French"&gt;
  &lt;use_label_element for="check_16"&gt;French&lt;/use_label_element&gt;
  
  &lt;input id=cLanguages type="checkbox" name=cLanguages[] value="Spanish"&gt;
  &lt;use_label_element for="check_17"&gt;Spanish&lt;/use_label_element&gt;
  
  &lt;p&gt;Your Address (required)&lt;br /&gt; &lt;/p&gt;
  [text* cAddress id:cAddress]
  
  &lt;select cNeighborhood id:cNeighborhood name=cNeighborhood&gt;
  &lt;option value="Bat Yam"&gt;Bat Yam&lt;/option&gt;
  &lt;option value="Raanana"&gt;Raanana&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;label&gt; Create Password (required)
  [text* cPswd id:cPswd] &lt;/label&gt;
  
  &lt;label&gt; Confirm Password (required)
  [text* cPswd id:cPswd] &lt;/label&gt;
  
  &lt;label&gt; Pick a Service (required)&lt;/label&gt;
  &lt;select cService id:cService name=cService&gt;
  &lt;option value="Babysitter"&gt;Babysitter&lt;/option&gt;
  &lt;option value="Cleaner"&gt;Cleaner&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;input type="submit" name="submit" value="Submit"&gt;
  &lt;/form&gt;
  &lt;script src="http://code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/jquery.validate.min.js"&gt;   &lt;/script&gt;
  &lt;script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $("#commentForm").validate();
  &lt;/script&gt;
  </code></pre>
  
  <p>I want to be redirected to </p>
  
  <blockquote>
    <p>/wp-content/plugins/my-codes/createAccount.php</p>
  </blockquote>
  
  <p>when I press submit button.</p>