Bootstrap Form Wizard - Preventing Progress until Step is Validated

Question

I am using http://vadimg.com/twitter-bootstrap-wizard-example/ and so far, so good.

Since I'm using Step Validation with this form, I would like to prevent the user from progressing through the steps without validating them. This is fine with the PREVIOUS and NEXT buttons at the bottom of the wizard, but not so much with the TABS at the top, that are constantly active.

I am aware of the onTabClick and onTabShow methods but I'm not clear on how to check for completed steps or incomplete steps.

Answer 1

How it works

• Example is based on http://vadimg.com/twitter-bootstrap-wizard-example/examples/validation.html
• onTabClick - basically it works the same as onNext. It validates form fields of the current tab, one difference is that I'm checking if clicked tab was previous or next (by comparing currentIndex and nextIndex parameters), if it is previous, it's not validating any form fields. It's also important not to allow jumping from for example 1 to 3 step, only from 1 to 2, 2 to 3 etc. (thanks @imjosh).

$(document).ready(function() {

  var $validator = $("#commentForm").validate({
    rules: {
      emailfield: {
        required: true,
        email: true,
        minlength: 3
      },
      namefield: {
        required: true,
        minlength: 3
      },
      urlfield: {
        required: true,
        minlength: 3,
        url: true
      }
    }
  });

  $('#rootwizard').bootstrapWizard({
    'tabClass': 'nav nav-pills',
    'onNext': function(tab, navigation, index) {
      var $valid = $("#commentForm").valid();
      if (!$valid) {
        $validator.focusInvalid();
        return false;
      }
    },
    'onTabClick': function(activeTab, navigation, currentIndex, nextIndex) {
      if (nextIndex <= currentIndex) {
        return;
      }
      var $valid = $("#commentForm").valid();
      if (!$valid) {
        $validator.focusInvalid();
        return false;
      }
      if (nextIndex > currentIndex+1){
       return false;
      }
    }
  });
});

CODEPEN

Answer 2

This works, won't allow you to skip over tabs unless they are valid, and if you try to skip, you'll end up on the first invalid tab instead (e.g. if tab1 and tab2 are valid, tab3 is invalid, and you click on tab4, you end up on tab3 instead)

https://jsfiddle.net/wr5tv8em/5/

$(document).ready(function() {
    var $validator = $("#commentForm").validate({
          rules: {
            emailfield: {
              required: true,
              email: true,
              minlength: 3
            },
            namefield: {
              required: true,
              minlength: 3
            },
            urlfield: {
              required: true,
              minlength: 3,
              url: true
            }
          }
        });

        $('#rootwizard').bootstrapWizard({
            'tabClass': 'nav nav-pills',
            'onNext': validateTab,
                    'onTabClick': validateTab
        }); 

      function validateTab(tab, navigation, index, nextIndex){
        if (nextIndex <= index){
          return;
        }
        var commentForm = $("#commentForm")
        var $valid = commentForm.valid();
          if(!$valid) {
              $validator.focusInvalid();
                return false;
            }

        if (nextIndex > index+1){
         for (var i = index+1; i < nextIndex - index + 1; i++){
           $('#rootwizard').bootstrapWizard('show', i);
           $valid = commentForm.valid();
             if(!$valid) {
                 $validator.focusInvalid();
                 return false;
               }
         }

         return false;
        }
      }
});