title: jQuery button validate part of a form at a time
body: <p>Sorry if I did not explain my problem clearly. </p>
  
  <ol>
  <li>I have a form with multiple tables for users inputs. </li>
  <li>I use <code>next</code> and <code>back</code> buttons to hide and show different tables in order to guide users.</li>
  </ol>
  
  <p>Now the problem is:
  How do I use <code>next</code> button to validate current active table inputs? For example, every time a user click <code>next</code>, it will check if all the fields are filled?</p>
  
  <p>Here is a broken <a href="http://jsfiddle.net/godhong/Pz9NR/">DEMO</a>. Thanks for any comments!</p>
  
  <h3>HTML</h3>
  
  <pre><code>&lt;form method="post" id="form1" action=index.html&gt;
      &lt;table&gt;
          &lt;H4 align="center" id="id_tab"&gt;
              |&lt;a href="#" class="Chemical"&gt; Chemical &lt;/a&gt;|
               &lt;a href="#" class="Crop"&gt; Crop &lt;/a&gt;|
               &lt;a href="#" class="Physical"&gt; Physical &lt;/a&gt;|
              &lt;/H4&gt;
      &lt;/table&gt;&lt;br&gt;
      &lt;table class="tab tab_Chemical" border="0"&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;label for="id_wat_hl"&gt;Water Column Half life (days):&lt;/label&gt;&lt;/th&gt;
              &lt;td&gt;&lt;input type="text" name="wat_hl" id="id_wat_hl" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;table class="tab tab_Crop" border="0" style="display:none"&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;label for="id_zero_height_ref"&gt;Zero Height Reference:&lt;/label&gt;&lt;/th&gt;
              &lt;td&gt;&lt;input type="text" name="zero_height_ref" id="id_zero_height_ref" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;table class="tab tab_Physical" border="0" style="display:none"&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;label for="id_mas_tras_cof"&gt;Mass Transfer Coefficient (m/s):&lt;/label&gt;&lt;/th&gt;
              &lt;td&gt;&lt;input type="text" name="mas_tras_cof" id="id_mas_tras_cof" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;table align="center"&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input class="back" type="button" value="Back" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input class="next" type="button" value="Next" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input class="submit" type="submit" value="Submit" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <h3>JS</h3>
  
  <pre><code>$(document).ready(function() {
      var tab_pool = ["tab_Chemical", "tab_Crop", "tab_Physical"];
      var visible = $(".tab:visible").attr('class').split(" ")[1];
      var curr_ind = $.inArray(visible, tab_pool);
      $(".submit").hide();
      $(".back").hide();
  
      $('.next').click(function() {
          if (curr_ind &lt; 2) {
              $(".tab:visible").hide();
              curr_ind = curr_ind + 1;
              $("." + tab_pool[curr_ind]).show();
              $(".submit").hide();
              $(".back").show();
          }
          if (curr_ind == 2) {
              $(".submit").show();
              $(".next").hide();
          }
      });
  
      $('.back').click(function() {
          if (curr_ind &gt; 0) {
              $(".tab:visible").hide();
              curr_ind = curr_ind - 1;
              $("." + tab_pool[curr_ind]).show();
              $(".submit").hide();
              $(".next").show();
          }
          if (curr_ind == 0) {
              $(".back").hide();
          }
      });
      $(".next").click(function() {
          $(".tab tab_Chemical").validate({
              rules: {
                  wat_hl: "required"
              }
          })
      })
      $(".next").click(function() {
          $(".tab tab_Crop").validate({
              rules: {
                  zero_height_ref: "required"
              }
          })
      })
      $(".next").click(function() {
          $(".tab tab_Physical").validate({
              rules: {
                  mas_tras_cof: "required"
              }
          })
      })
  });
  </code></pre>