title: How to validate multiple fields at the same time using JQuery
body: <p>I have created a form that validates using JQuery and JavaScript. The only problem is, would be that it validates one field at a time. So the user has to correct the first field first and then press submit again to see if the next field is valid.</p>
  
  <p>What I would like to to do, is have the JQuery validate the whole form after pressing submit and show all the applicable error messages. </p>
  
  <p><strong>Here is My JS:</strong></p>
  
  <pre><code>function validateUserName()
  {
      var u = document.forms["NewUser"]["user"].value
      var uLength = u.length;
      var illegalChars = /\W/; // allow letters, numbers, and underscores
      if (u == null || u == "")
      {
  
          $("#ErrorUser").text("You Left the Username field Emptyyy");
          return false;
      }
      else if (uLength &lt; 4 || uLength &gt; 11)
      {
          $("#ErrorUser").text("The Username must be between 4 and 11 characters");
          return false;
      }
      else if (illegalChars.test(u))
      {
          $("#ErrorUser").text("The Username contains illegal charectors men!");
          return false;
      }
      else
      {
          return true;
      }
  }
  
  function validatePassword()
  {
      var p = document.forms["NewUser"]["pwd"].value
      var cP = document.forms["NewUser"]["confirmPwd"].value
      var pLength = p.length;
      if (p == null || p == "")
      {
          $("#ErrorPassword1").text("You left the password field empty");
          return false;
      }
      else if (pLength &lt; 6 || pLength &gt; 20)
      {
          $("#ErrorPassword1").text("Your password must be between 6 and 20 characters in length");
          return false;
      }
      else if (p != cP)
      {
          $("#ErrorPassword1").text("Th passwords do not match!");
          return false;
      }
      else
      {
          return true;
      }
  }
  
  function validateEmail()
  {
      var e = document.forms["NewUser"]["email"].value
      var eLength = e.length;
      var emailFilter = /^[^@]+@[^@.]+\.[^@]*\w\w$/;
      var illegalChars = /[\(\)\&lt;\&gt;\,\;\:\\\"\[\]]/;
  
      if (eLength == "" || eLength == null)
      {
  
          $("#ErrorEmail").text("You left the email field blank!");
          return false;
      }
      else if (e.match(illegalChars))
      {
  
          $("#ErrorEmail").text("ILEGAL CHARECTORS DETECTED EXTERMINATE");
          return false;
      }
      else
      {
          return true;
      }
  }
  
  function validateFirstName()
  {
      var f = document.forms["NewUser"]["fName"].value;
      var fLength = f.length;
      var illegalChars = /\W/;
  
      if (fLength &gt; 20)
      {
          $("#ErrorFname").text("First Name has a max of 20 characters");
          return false;
      }
      else if (illegalChars.test(f))
      {
          $("#ErrorFname").text("Numbers,letter and underscores in first name only");
          return false;
      }
      else
      {
          return true;
      }
  
  
  }
  
  function validateLastName()
  {
      var l = document.forms["NewUser"]["lName"].value;
      var lLength = l.length;
      var illegalChars = /\W/;
  
      if (lLength &gt; 100)
      {
          $("#ErrorLname").text("Last Name has a max of 100 characters");
          return false;
      }
      else if (illegalChars.test(f))
      {
          $("#ErrorLname").text("Numbers,letter and underscores in last name only");
          return false;
      }
      else
      {
          return true;
      }
  
  
  }
  
  function validateForm()
  {
      valid = true;
      //call username function
      valid = valid &amp;&amp; validateUserName();
  
      //call password function
      valid = valid &amp;&amp; validatePassword();
  
      //call email function
      valid = valid &amp;&amp; validateEmail();
  
      //call first name function
      valid = valid &amp;&amp; validateFirstName();
  
      //call first name function
      valid = valid &amp;&amp; validateLastName();
  
      return valid;
  }
  </code></pre>
  
  <p><strong>And here is my submit form code:</strong></p>
  
  <pre><code>$('#your-form').submit(validateForm);
  </code></pre>