title: How to make form only submit if all functions return true?
body: <p>I want my form to only submit if all my JavaScript functions return true.</p>
  
  <p>Here is my Javascript code:</p>
  
  <pre><code>function validateUserName(NewUser)
  {
      var u = document.forms["NewUser"]["user"].value
      var uLength = u.length;
      var illegalChars = /\W/; // allow letters, numbers, and underscores
      if (u == null || u == "")
      {
          alert("You left Username field empty");
          return false;
      }
      else if (uLength &lt;4 || uLength &gt; 11)
      {
          alert("The Username must be between 4 and 11 characters");
          return false;
      }
      else if (illegalChars.test(u)) 
      {
          alert("The username contains illegal characters");
          return false;
      }
      else
      {
          return true;
      }
  }
  
  
  function validatePassword(NewUser)
  {
      var p = document.forms["NewUser"]["pwd"].value
      var cP = document.forms["NewUser"]["confirmPwd"].value
      var pLength = p.length;
      if (p == null || p == "")
      {
          alert("You left the password field empty");
          return false;
      }
      else if (pLength &lt; 6 || pLength &gt; 20)
      {
          alert("Your password must be between 6 and 20 characters in length");
          return false;
      }
      else if (p != cP)
      {
          alert("The passwords do not match!");
          return false;
      }
      else
      {
          return true;
      }
  }
  
  function validateEmail(NewUser)
  {
      var e = document.forms["NewUser"]["email"].value
      var eLength = e.length;
      var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/ ;
      var illegalChars= /[\(\)\&lt;\&gt;\,\;\:\\\"\[\]]/ ;
  
      if (eLength == "" || eLength == null) 
      {
  
          alert("You left the email field blank!");
          return false;
      } 
      else if (e.match(illegalChars)) 
      {
  
          alert("ILEGAL CHARECTORS DETECTED EXTERMINATE");
          return false;
      } 
      else 
      {
          return true;
      }
  }
  function validateFirstName(NewUser)
  {
      var f = document.forms["NewUser"]["fName"].value;
      var fLength = f.length;
      var illegalChars = /\W/;
  
      if(fLength &gt; 20)
      {
          alert("First Name has a max of 20 characters");
          return false;
      }
      else if (illegalChars.test(f))
      {
          alert("Numbers,letter and underscores in first name only");
          return false;
      }
      else 
      {
          return true;
      }
  
  
  }
  
  function validateLastName(NewUser)
  {
      var l = document.forms["NewUser"]["lName"].value;
      var lLength = l.length;
      var illegalChars = /\W/;
  
      if(lLength &gt; 100)
      {
          alert("Last Name has a max of 100 characters");
          return false;
      }
      else if (illegalChars.test(f))
      {
          alert("Numbers,letter and underscores in last name only");
          return false;
      }
      else 
      {
          return true;
      }
  
  
  }
  
  function validateForm()
  {
      //call username function
      validateUserName();
  
      //call password function
      validatePassword();
  
      //call email function
      validateEmail();
  
      //call first name function
      validateFirstName();
  
      //call first name function
      validateLastName();
  }
  </code></pre>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;table id = "SignUpTable"&gt;
          &lt;p id = "SubHeading"&gt;Sign Up.&lt;/p&gt;
              &lt;form name = "NewUser" onsubmit= "validateForm()" action = ""&gt;
                  &lt;tr&gt;
                  &lt;td class = "FieldName"&gt;Username:&lt;/td&gt; 
                  &lt;td class = "TextField"&gt;&lt;input type = "text" name = "user"/&gt;&lt;/td&gt; 
                  &lt;/tr&gt;
                  &lt;tr&gt;
                  &lt;td class = "Information"&gt;&lt;em&gt;Must be 4-11 characters.&lt;br/&gt;Only numbers, letters and underscores.&lt;/em&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                  &lt;td class = "FieldName"&gt;Email:&lt;/td&gt; 
                  &lt;td class = "TextField"&gt;&lt;Input type = "text" name = "email"/&gt;&lt;/td&gt;
                  &lt;tr&gt;
                  &lt;td  class = "Information"&gt;&lt;em&gt;We need this to verify your account.&lt;/em&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                  &lt;td class = "FieldName"&gt;Password:&lt;/td&gt;
                  &lt;td class = "TextField"&gt;&lt;input type = "password" name = "pwd"/&gt;&lt;/td&gt;
                  &lt;tr&gt;
                  &lt;td  class = "Information"&gt;&lt;em&gt;6-20 characters&lt;/em&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                  &lt;td class = "FieldName"&gt;Confirm Password:&lt;/td&gt;
                  &lt;td class = "TextField"&gt;&lt;input type = "password" name = "confirmPwd"/&gt;&lt;/td&gt;
                  &lt;tr&gt;
                  &lt;td  class = "Information"&gt;&lt;em&gt;just in case you didn't make mistakes!&lt;/em&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;!-- Optional --&gt;
  
  
                  &lt;tr&gt;
                  &lt;td class = "FieldName"&gt;First Name:&lt;/td&gt;
                  &lt;td class = "TextField"&gt;&lt;input type = "text" name = "fName"/&gt;&lt;/td&gt;
                  &lt;tr&gt;
                  &lt;td  class = "Information"&gt;&lt;em&gt;optional&lt;/em&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                  &lt;td class = "FieldName"&gt;Lastname:&lt;/td&gt;
                  &lt;td class = "TextField"&gt;&lt;input type = "text" name = "lName"/&gt;&lt;/td&gt;
                  &lt;tr&gt;
                  &lt;td  class = "Information"&gt;&lt;em&gt;(optional)&lt;/em&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
                  &lt;tr&gt;
                  &lt;td&gt;&lt;input type = "submit" value = "Submit"/&gt;&lt;/td&gt;
                  &lt;/tr&gt;
  
          &lt;/table&gt;
  
  
  
              &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And here is a JS Fiddle: </p>
  
  <p><a href="http://jsfiddle.net/vK9aJ/" rel="nofollow noreferrer">http://jsfiddle.net/vK9aJ/</a></p>
  
  <p>(Please ignore the bad sizing in the form)</p>