title: Jquery validation multiple tabs
body: <p>I'm new to jQuery and I'm trying to use it and the validation plugin (<a href="http://docs.jquery.com/Plugins/Validation" rel="nofollow">http://docs.jquery.com/Plugins/Validation</a>) to create a multi-part form with multiple tabs for different sections. Right now I have it where there are multiple tabs and the "Next" and "Prev" button switches to the next tab.
  The problem I'm having is how to merge my validation with my multiple tabs.
  Thanks.</p>
  
  <pre><code>&lt;div class="tabbable"&gt;
      &lt;form class="form-horizontal" id="validation-form" method="POST" action="Fanalisis/analisisProses.php"&gt;
          &lt;div id="tabs"&gt;
             &lt;ul class="nav nav-tabs padding-18"&gt;
                  &lt;li class="active"&gt;
                      &lt;a data-toggle="tab" href="#lokasi"&gt;
                          &lt;i class="green icon-location-arrow bigger-120"&gt;&lt;/i&gt;
                          Lokasi dan Pasokan Air Minimum
                      &lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                     &lt;a data-toggle="tab" href="#laju"&gt;
                         &lt;i class="orange icon-bolt bigger-120"&gt;&lt;/i&gt;
                         Laju Penerapan Air
                     &lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                     &lt;a data-toggle="tab" href="#potensi"&gt;
                        &lt;i class="blue icon-anchor bigger-120"&gt;&lt;/i&gt;
                        Potensi Pengangkutan Air
                     &lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                     &lt;a data-toggle="tab" href="#result"&gt;
                         &lt;i class="pink icon-fire-extinguisher bigger-120"&gt;&lt;/i&gt;
                         Result
                     &lt;/a&gt;
                   &lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;div class="tab-content no-border padding-24"&gt;
               &lt;!--LOKASI--&gt;
                  &lt;div id="lokasi" class="tab-pane in active"&gt;
                       ....
                       &lt;div class="hr hr10 hr-double"&gt;&lt;/div&gt;\
  
                            &lt;ul class="pager pull-right"&gt;
  
                                &lt;li class="previous disabled"&gt;
  
                                   &lt;a class="prevtab" href="#"&gt;&amp;larr; Prev&lt;/a&gt;
                                &lt;/li&gt;
  
                                 &lt;li class="next"&gt;
                                    &lt;a class="nexttab" href="#laju"&gt;Next &amp;rarr;&lt;/a&gt;
                                 &lt;/li&gt;
                             &lt;/ul&gt;
                         &lt;/div&gt;
                         &lt;!--END LOKASI--&gt;
                         &lt;!--LAJU--&gt;
  
                         &lt;div id="laju" class="tab-pane"&gt;
                             ...
                         &lt;div class="hr hr10 hr-double"&gt;&lt;/div&gt;
  
                         &lt;ul class="pager pull-right"&gt;
                             &lt;li class="previous"&gt;
                                 &lt;a class="prevtab" href="#lokasi"&gt;&amp;larr; Prev&lt;/a&gt;
                             &lt;/li&gt;
  
                             &lt;li class="next"&gt;
                                 &lt;a class="nexttab" href="#potensi"&gt;Next &amp;rarr;&lt;/a&gt;
                             &lt;/li&gt;
                         &lt;/ul&gt;
                     &lt;/div&gt;
                     &lt;!--END LAJU--&gt;
                     &lt;!--POTENSI--&gt;
                     &lt;div id="potensi" class="tab-pane"&gt;
                         ...
  
                         &lt;div class="hr hr10 hr-double"&gt;&lt;/div&gt;
  
                         &lt;ul class="pager pull-right"&gt;
                             &lt;li class="previous"&gt;
                                  &lt;a class="prevtab" href="#laju"&gt;&amp;larr; Prev&lt;/a&gt;
                             &lt;/li&gt;
  
                             &lt;li class="next"&gt;
                                  &lt;a class="nexttab" href="#result"&gt;Next &amp;rarr;&lt;/a&gt;
                             &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;!--END POTENSI--&gt;
                      &lt;!--RESULT--&gt;
                      &lt;div id="result" class="tab-pane"&gt;
                          ....
                      &lt;div class="form-actions"&gt;
                          &lt;div class="pull-right"&gt;
                              &lt;button class="btn"&gt;
                                  &lt;i class="icon-arrow-left bigger-110"&gt;&lt;/i&gt;
                                  Kembali
                              &lt;/button&gt;
  
                               &amp;nbsp; &amp;nbsp; &amp;nbsp;
                               &lt;button class="btn btn-info" type="submit"&gt;
                                   &lt;i class="icon-ok"&gt;&lt;/i&gt;
                                    Submit
                                &lt;/button&gt;
                           &lt;/div&gt;
                      &lt;/div&gt;
                 &lt;/div&gt;
                 &lt;!--END RESULT--&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
        &lt;/form&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>this tabs "next" and "prev" code.</p>
  
  <pre><code>$('.nexttab').click(function() {
      $('.nav-tabs &gt; .active').next('li').find('a').trigger('click');
  });
  
  $('.prevtab').click(function() {
      $('.nav-tabs &gt; .active').prev('li').find('a').trigger('click');
  });
  </code></pre>
  
  <p>this my validation code.</p>
  
  <pre><code>$(function() {
              $('#validation-form').show();
              //documentation : http://docs.jquery.com/Plugins/Validation/validate
              $('#validation-form').validate({
                  errorElement: 'span',
                  errorClass: 'help-block',
                  focusInvalid: false,
                  rules: {
                      kecamatan: {
                          required: true
                      },
                      nama_tipe_baru1: {
                          required: true
                      },
                      nilai_tipe_baru1: {
                          required: true
                      },
                      nama_tipe_baru2: {
                          required: true
                      },
                      nilai_tipe_baru2: {
                          required: true
                      },
                      desa: {
                          required: true
                      },
                      sumber_air_: {
                          required: true
                      },
                      exposure: {
                          required: true
                      },
                      tipe_proteksi: {
                          required: true
                      },
                      nilai_bangunan1: {
                          required: true
                      },
                      nilai_bangunan2: {
                          required: true
                      },
                      angka_kostruksi1: {
                          required: true
                      },
                      angka_kostruksi2: {
                          required: true
                      },
                      tinggi1: {
                          required: true
                      },
                      tinggi2: {
                          required: true
                      },
                      tepol: {
                          required: true
                      }
                  },
                  messages: {
                      kecamatan: "Mohon untuk memilih lokasi kecamatan.",
                      desa: "Mohon untuk memilih lokasi desa.",
                      sumber_air_: "Mohon untuk memilih sumber air.",
                      tipe_proteksi: "Mohon untuk memilih tipe proteksi kebakaran.",
                      exposure: "Mohon untuk memilih.",
                      tepol: "Mohon untuk memilih."
                  },
                  invalidHandler: function(event, validator) { //display error alert on form submit   
                      $('.alert-error', $('.login-form')).show();
                  },
                  highlight: function(e) {
                      $(e).closest('.control-group').removeClass('info').addClass('error');
                  },
                  success: function(e) {
                      $(e).closest('.control-group').removeClass('error').addClass('info');
                      $(e).remove();
                  },
                  errorPlacement: function(error, element) {
                      if (element.is(':checkbox') || element.is(':radio')) {
                          var controls = element.closest('.controls');
                          if (controls.find(':checkbox,:radio').length &gt; 1)
                              controls.append(error);
                          else
                              error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                      }
                      else if (element.is('.select2')) {
                          error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                      }
                      else if (element.is('.chzn-select')) {
                          error.insertAfter(element.siblings('[class*="chzn-container"]:eq(0)'));
                      }
                      else
                          error.insertAfter(element);
                  },
                  submitHandler: function(form) {
                      var url = "Fanalisis/analisisProses.php";
  
                      // mengambil nilai dari inputbox, textbox dan select
                      var v_kec = $('select[name=kecamatan]').val();
                      var v_air = $('select[name=sumber_air]').val();
                      var v_desa = $('select[name=desa]').val();
                      var v_bangunan1 = $('input:text[name=nilai_bangunan1]').val();
                      var v_bangunan2 = $('input:text[name=nilai_bangunan2]').val();
                      var v_akons1 = $('select[name=angka_konstruksi1]').val();
                      var v_akons2 = $('select[name=angka_konstruksi2]').val();
                      var v_tinggi1 = $('input:text[name=tinggi1]').val();
                      var v_tinggi2 = $('input:text[name=tinggi2]').val();
                      var v_exposure = $('input:radio[name=exposure]').val();
                      var v_tepol = $('input:radio[name=tepol]').val();
                      //var v_hasil1 = $('input:text[name=hasil1]').val();
                      //var v_hasil2 = $('input:text[name=hasil2]').val();
  
                      $.post(url, {tinggi2: v_tinggi2, desa: v_desa, kecamatan: v_kec, sumber_air: v_air, nilai_bangunan1: v_bangunan1, nilai_bangunan2: v_bangunan2, angka_konstruksi1: v_akons1, angka_konstruksi2: v_akons2, tinggi1: v_tinggi1, exposure: v_exposure, tepol: v_tepol, hasil1: v_hasil1, hasil2: v_hasil2}, function() {
  
                      })
                  },
                  invalidHandler: function(form) {
                  }
              });
          });
  </code></pre>