title: Validating multiple form fields with JavaScript
body: <p>I have already searched the site and while I found similar issues, I couldn't get the answer I needed, so I am asking now. I need to validate a contact form, the PHP validation is very simple but works on a base level, I want to supplement this with browser validation through JS but it is not working, the JS validation does not trigger or is not correctly coded.</p>
  
  <p>I'm working on this page: <a href="http://camp-tags.com/?main_page=contact" rel="nofollow">http://camp-tags.com/?main_page=contact</a></p>
  
  <p>Thanks in advance for looking for me.</p>
  
  <p>The function is supposed to loop through and make sure that the 4 elements are not empty, and that both variables for phonenumber and email are formatted correctly. If any flag as false, the error is supposed to be pushed to an array and then all errors output in a single alert.</p>
  
  <p>Below is the code. (updated using the tips given here. No validation at all now.)</p>
  
  <p>*update: I found one glaring error I can not believe I missed. I didn't have a closing tag on the , now that is done, the form will not send unless you input the phone correct but is not validating the rest and no Alert is being issued to advise what is wrong?
  JS:</p>
  
  <pre><code>    function validateForm(event){
      var form1 = document.getElementById("form1"),
      phone = document.getElementById("phonenumber").value,
      email = document.getElementById("email").value,
      name = document.getElementById("name").value,
      address = document.getElementById("address").value,
      tomatch = /^\d{3}-\d{3}-\d{4}$/,
      emailMatch = /^\[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[A-Z]{2,4}$/;
  
      var errors = [];
      if (phone){
      event.preventDefault();
      errors.push("The Phone Number is required.");
      return false;
      } else if (tomatch.test(phone)){
          return true;
      } else {
          event.preventDefault();
          errors.push("The phone number must be formated as follows: XXX-XXX-XXXX.");
          return false;
      }
  
      if (name === null || name === " "){
          event.preventDefault();
          errors.push("The Name is required.");
          return false;
      } else {
          return true;
      }
  
      if (email === null || email === " "){
          event.preventDefault();
          errors.push("The email is required.");
          return false;
      } else if (emailMatch.test(email)){
          return true;
      } else {
          event.preventDefault();
          errors.push("The email must be formated as follows: name@domain.com.");
          return false;
      }
  
      if (address === null || address === " "){
          event.preventDefault();
          errors.push("The Address is required.");
          return false;
      } else {
          return true;
      }
      if(errors.length &gt; 0){
          for(var i=0;i&lt;errors.length;i++){
              alert(errors)
          }
          return false;
      } else {
          return true;
      }   
  }
  </code></pre>
  
  <p>html: </p>
  
  <p><h2>Send Us An Email</h2></p>
  
  <pre><code>                &lt;form enctype="multipart/form-data" action="assets/mailer.php" method="POST" id="form1" onSubmit="return validateForm()"&gt;
       &lt;label for="Name"&gt;Name:&lt;/label&gt;&lt;br /&gt;
       &lt;input size="100%" type="text" name="name" id="name"&gt;&lt;br&gt;
       &lt;label for="Email"&gt;E-mail:&lt;/label&gt;&lt;br /&gt;
       &lt;input size="100%" type="text" name="email" id="email" value=""&gt;&lt;br /&gt;
       &lt;label for="Phone"&gt;Phone Number:&lt;/label&gt;&lt;br /&gt;
       &lt;input size="100%" type="text" name="phonenumber" id="phonenumber" value=""&gt;&lt;br /&gt;
       &lt;label for="Address"&gt;Shipping Address:&lt;/label&gt;&lt;br /&gt;
       &lt;input size="100%" type="text" name="address" id="address" value=""&gt;&lt;br /&gt;
  
       &lt;label for="comment"&gt;Input Comments/Questions:&lt;/label&gt;&lt;br /&gt;
       &lt;input size="100%" type="text" name="comment" value=""&gt;&lt;br&gt;&lt;br&gt;
        Please choose a file: &lt;br /&gt;
       &lt;input name="uploaded" type="file" /&gt;&lt;br /&gt;
       &lt;br /&gt; 
  
       &lt;input size="100%" type="submit" value="Submit" /&gt;&lt;br /&gt;
       &lt;input size="100%" type="reset" value="Reset"&gt;
      &lt;/form&gt;
      &lt;script type="text/javascript" src="./assets/validation.js"&gt;
  </code></pre>