title: How to validate a twitter bootstrap form wizard
body: <p>I am using twitter bootstrap and want to combine form wizard with validation. But after trying very much the form wizard and validation is not working on next botton. Where I am making mistake. My coding is below</p>
  
  <pre><code>&lt;div class="portlet-body form"&gt;
                          &lt;form action="#" id="form_sample_2" class="form-horizontal"&gt;
                             &lt;div class="form-wizard"&gt;
                                &lt;div class="navbar steps"&gt;
                                   &lt;div class="navbar-inner"&gt;
                                      &lt;ul class="row-fluid nav nav-pills"&gt;
                                         &lt;li class="span3 active"&gt;
                                            &lt;a href="#tab1" data-toggle="tab" class="step active"&gt;
                                            &lt;span class="number"&gt;1&lt;/span&gt;
                                            &lt;span class="desc"&gt; Registration&lt;/span&gt;   
                                            &lt;/a&gt;
                                         &lt;/li&gt;
                                         &lt;li class="span3"&gt;
                                            &lt;a href="#tab2" data-toggle="tab" class="step"&gt;
                                            &lt;span class="number"&gt;2&lt;/span&gt;
                                            &lt;span class="desc"&gt; Review Application&lt;/span&gt;   
                                            &lt;/a&gt;
                                         &lt;/li&gt;
                                       &lt;/ul&gt;
                                   &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div id="bar" class="progress progress-success progress-striped"&gt;
                                   &lt;div class="bar" style="width: 25%;"&gt;&lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="tab-content background-color-blue"&gt;
                                   &lt;div class="tab-pane active" id="tab1"&gt;
                                      &lt;h3 class="block"&gt;Registration&lt;/h3&gt;
                                      &lt;div class="control-group"&gt;
                                         &lt;label class="control-label"&gt;UserName:&lt;/label&gt;
                                         &lt;div class="controls span8"&gt;
                                            &lt;input type="text" data-required="1" name="username" id="username" value="user" class="span6 m-wrap"&gt;
                                            &lt;span class="help-inline"&gt;UsernameTip&lt;/span&gt;
                                         &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="control-group"&gt;
                                         &lt;label class="control-label"&gt;PassWord:&lt;/label&gt;
                                         &lt;div class="controls span8"&gt;
                                            &lt;input type="password" data-required="1" name="password" id="password" value="password" class="span6 m-wrap"&gt;
                                            &lt;span class="help-inline"&gt;{L_PassWordTip}&lt;/span&gt;
                                         &lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div class="control-group"&gt;
                                         &lt;label class="control-label"&gt;ConfirmPassWord:&lt;/label&gt;
                                         &lt;div class="controls span8"&gt;
                                            &lt;input type="password" data-required="1" name="password2" id="password2" value="password2" class="span6 m-wrap"&gt;
                                            &lt;span class="help-inline"&gt;ConfirmPassWordTip&lt;/span&gt;
                                         &lt;/div&gt;
                                      &lt;/div&gt;                                
                                   &lt;/div&gt;
                                   &lt;div class="tab-pane" id="tab2"&gt;
                                      &lt;h3 class="block"&gt;AppReview&lt;/h3&gt;
                                       &lt;div class="control-group"&gt;
                                         &lt;label class="control-label"&gt;Entered UserName:&lt;/label&gt;
                                         &lt;div class="controls span8"&gt;
                                            &lt;span class="text" id="username_pr"&gt;&lt;/span&gt;
                                         &lt;/div&gt;
                                       &lt;/div&gt;
                                      &lt;div class="control-group"&gt;
                                         &lt;label class="control-label"&gt;Entered PassWord:&lt;/label&gt;
                                         &lt;div class="controls span8"&gt;
                                            &lt;span class="text"&gt;**Hidden**&lt;/span&gt;
                                         &lt;/div&gt;
                                      &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class="clearfix"&gt;
                                   &lt;a href="javascript:;" class="btn btn-large btn-info button-previous" style="display: none;"&gt;
                                   &lt;i class="m-icon-swapleft m-icon-white"&gt;&lt;/i&gt; Back 
                                   &lt;/a&gt;
                                   &lt;a href="javascript:;" onclick="submit" class="btn btn-large btn-info button-next"&gt;
                                   Continue &lt;i class="m-icon-swapright m-icon-white"&gt;&lt;/i&gt;
                                   &lt;/a&gt;
                                   &lt;a href="javascript:;" class="btn btn-large btn-success button-submit" style="display: none;"&gt;
                                   Submit &lt;i class="m-icon-swapright m-icon-white"&gt;&lt;/i&gt;
                                   &lt;/a&gt;
                                &lt;/div&gt;
                             &lt;/div&gt;
                          &lt;/form&gt;
                       &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  var FormWizard = function () {
  
  
      return {
          //main function to initiate the module
          init: function () {
              if (!jQuery().bootstrapWizard) {
                  return;
              }
  
              // default form wizard
              $('#form_sample_2').bootstrapWizard({
                  'nextSelector': '.button-next',
                  'previousSelector': '.button-previous',
                  onTabClick: function (tab, navigation, index) {
                      alert('on tab click disabled');
                      return false;
                  },
  
                  onNext: function (tab, navigation, index) {
                      var total = navigation.find('li').length;
                      var current = index + 1;
                      // set wizard title
                      $('.step-title', $('#form_sample_2')).text('Step ' + (index + 1) + ' of ' + total);
                      // set done steps
                      jQuery('li', $('#form_sample_2')).removeClass("done");
                      var li_list = navigation.find('li');
                      for (var i = 0; i &lt; index; i++) {
                          jQuery(li_list[i]).addClass("done");
                      }
  
                      if (current == 1) {
                          $('#form_sample_2').find('.button-previous').hide();
                      } else {
                          $('#form_sample_2').find('.button-previous').show();
                      }
  
                      if (current &gt;= total) {
                          $('#form_sample_2').find('.button-next').hide();
                          $('#form_sample_2').find('.button-submit').show();
                      } else {
                          $('#form_sample_2').find('.button-next').show();
                          $('#form_sample_2').find('.button-submit').hide();
                      }
                      App.scrollTo($('.page-title'));
                  },
                  onPrevious: function (tab, navigation, index) {
                      var total = navigation.find('li').length;
                      var current = index + 1;
                      // set wizard title
                      $('.step-title', $('#form_sample_2')).text('Step ' + (index + 1) + ' of ' + total);
                      // set done steps
                      jQuery('li', $('#form_sample_2')).removeClass("done");
                      var li_list = navigation.find('li');
                      for (var i = 0; i &lt; index; i++) {
                          jQuery(li_list[i]).addClass("done");
                      }
  
                      if (current == 1) {
                          $('#form_sample_2').find('.button-previous').hide();
                      } else {
                          $('#form_sample_2').find('.button-previous').show();
                      }
  
                      if (current &gt;= total) {
                          $('#form_sample_2').find('.button-next').hide();
                          $('#form_sample_2').find('.button-submit').show();
                      } else {
                          $('#form_sample_2').find('.button-next').show();
                          $('#form_sample_2').find('.button-submit').hide();
                      }
  
                      App.scrollTo($('.page-title'));
                  },
                  onTabShow: function (tab, navigation, index) {
                      var total = navigation.find('li').length;
                      var current = index + 1;
                      var $percent = (current / total) * 100;
                      $('#form_sample_2').find('.bar').css({
                          width: $percent + '%'
                      });
                  }
              });
  
              $('#form_sample_2').find('.button-previous').hide();
              $('#form_sample_2 .button-submit').click(function () {
                  alert('Finished! Hope you like it :)');
              }).hide();
          }
  
      };
  
  }();
  &lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  var FormValidation = function () {
  
  
      return {
          //main function to initiate the module
          init: function () {
  
              //Sample 2
              var form2 = $('#form_sample_2');
              var error2 = $('.alert-error', form2);
              var success2 = $('.alert-success', form2);
              form2.validate({
                  errorElement: 'span', //default input error message container
                  errorClass: 'help-inline', // default input error message class
                  focusInvalid: false, // do not focus the last invalid input
                  ignore: "",
                  rules: {
                      username: {
                          minlength: 5,
                          maxlength: 32,
                          required: true
                      },
                      password:{
                          minlength: 4,
                          maxlength: 32,
                          required:true
                      },
                      password2:{
                          required:true,
                          equalTo:password
                      },
                  },
  
  
                  errorPlacement: function (error, element) { // render error placement for each input type
                          error.insertAfter(element); // for other inputs, just perform default behavoir
                  },
  
                  invalidHandler: function (event, validator) { //display error alert on form submit   
                      success2.hide();
                      error2.show();
                      App.scrollTo(error2, -200);
                  },
  
                  highlight: function (element) { // hightlight error inputs
                      $(element)
                          .closest('.help-inline').removeClass('ok'); // display OK icon
                      $(element)
                          .closest('.control-group').removeClass('success').addClass('error'); // set error class to the control group
  
                  },
  
                  unhighlight: function (element) { // revert the change dony by hightlight
                      $(element)
                          .closest('.control-group').removeClass('error'); // set error class to the control group
                  },
  
                  success: function (label) {
                          label
                          .addClass('valid').addClass('help-inline ok') // mark the current input as valid and display OK icon
                          .closest('.control-group').removeClass('error').addClass('success'); // set success class to the control group
                  },
  
                  submitHandler: function (form) {
                      success2.show();
                      error2.hide();
                  }
  
              });
  
          }
  
      };
  
  }();
  &lt;/script&gt;
  
  
  &lt;script src="js/chosen.jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/plugins/wizard-master/jquery.bootstrap.wizard.js"&gt;&lt;/script&gt;
  &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.validate.min.js"&gt;&lt;/script&gt;
  </code></pre>