title: Jquery validation of a form split across multiple hidden DIVs
body: <p>I've created a form that is split into 2 DIVs. When the user clicks the NEXT button, I want to do 2 things: 1. Validate the text fields in the first DIV, and if successful; 2. Hide the first DIV and fadein the second DIV (if validation fails, show a message, and prevent the display of the 2nd part of the form).</p>
  
  <p>I've stripped down my code. This is the script that currently hides the first DIV when clicking on an image button. I do not know how to modify this script to execute the validation on the fields, preventing the first DIV from hiding and the second one showing:</p>
  
  <pre><code>&lt;script&gt;
    $(document).ready(function(){
      $("img.nextlink").click(function (event) {
      $("#partone").hide();
      $("#parttwo").fadeIn("slow");
    });    
  &lt;/script&gt; 
  </code></pre>
  
  <p>The Form is as follows:</p>
  
  <pre><code>&lt;form action="mail.php" method="post" enctype="multipart/form-data" name="registration"&gt;
  
  &lt;div id="partone"&gt;
  Name:* &lt;input type="text" name="customer_name" id="customer_name" /&gt;
  &lt;img src="images/arrow.png" id="arrow" class="nextlink" alt="next"&gt;
  &lt;/div&gt;    
  
  &lt;div id="parttwo"&gt;
  Address*: &lt;input type="text" name="address" id="address" /&gt;
  &lt;INPUT TYPE="image" src="images/arrow.png" alt="Submit"&gt;
  &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div#partone {   
  }
  div#parttwo {
      display: none;
  }
  </code></pre>