title: validate form with javascript?
body: <p>I am trying to use the following code to validate my form before a user can submit.</p>
  
  <p>javascript:</p>
  
  <pre><code>&lt;script&gt;
      function validateForm() {
       var x = document.forms["register"]["firstname"].value;
       var x = document.forms["register"]["lastname"].value;
       var x = document.forms["register"]["email"].value;
       var x = document.forms["register"]["email2"].value;
       if (x == null || x == "") {
           $(".form_error").show();
           return false;
       }
   }
   &lt;/script&gt;
  </code></pre>
  
  <p>my form basically looks like this:</p>
  
  <p>Section 1:</p>
  
  <pre><code>&lt;form name="register" action="include/signup_process.php" onsubmit="return validateForm()" method="post"&gt;
  
  &lt;div class="form_error"&gt;Ooops! There is some missing or incorrect information. Please look back over this section. &lt;/div&gt; 
  
  &lt;input type="text" name="firstname" class="login_form2"&gt;&lt;br/&gt;
  &lt;input type="text" name="lastname" class="login_form2"&gt;&lt;br/&gt; 
  </code></pre>
  
  <p>Section 2</p>
  
  <pre><code>&lt;form name="register" action="include/signup_process.php" onsubmit="return validateForm()" method="post"&gt;
  
  &lt;div class="form_error2"&gt;Ooops! There is some missing or incorrect information. Please look back over this section. &lt;/div&gt; 
  
  &lt;input type="text" name="email" class="login_form2"&gt;&lt;br/&gt;
  &lt;input type="text" name="email2" class="login_form2"&gt;&lt;br/&gt;  
  </code></pre>
  
  <p>Section 3</p>
  
  <pre><code>    &lt;form name="register" action="include/signup_process.php" onsubmit="return validateForm()" method="post"&gt;
  
      &lt;div class="form_error3"&gt;Ooops! There is some missing or incorrect information. Please look back over this section. &lt;/div&gt; 
  
      &lt;input type="text" name="username" class="login_form2"&gt;&lt;br/&gt;
      &lt;input type="text" name="password" class="login_form2"&gt;&lt;br/&gt;  
  </code></pre>
  
  <p>I have basically broken my form into three sections, and when a user submits the form they are suppose to get one of 3 possible errors/divs which tell the user which section they need to go back and revise.</p>
  
  <p>I am trying to amend my javascript code like below so that I can basically run a different check for the input boxes in my form for each section and display the different div elements depending on which input box from the appropriate section causes the error. can someone please show me what I would need to do to make this work. thanks in advance.</p>
  
  <pre><code>&lt;script&gt;
          function validateForm() {
           var x = document.forms["register"]["firstname"].value;
           var x = document.forms["register"]["lastname"].value;
           if (x == null || x == "") {
           $(".form_error").show();
           return false;
           var x = document.forms["register"]["email"].value;
           var x = document.forms["register"]["email2"].value;
           if (x == null || x == "") {
               $(".form_error2").show();
               return false;
           var x = document.forms["register"]["username"].value;
           var x = document.forms["register"]["password"].value;
           if (x == null || x == "") {
               $(".form_error2").show();
               return false;
  
  
  
           }
       }
       &lt;/script&gt;
  </code></pre>