Bootstrap 表单向导 - 在步骤验证之前阻止进度

Question

我正在使用http://vadimg.com/twitter-bootstrap-wizard-example/到目前为止，还不错。

由于我在此表单中使用了 Step Validation，因此我想防止用户在未验证它们的情况下继续执行这些步骤。这对于向导底部的 PREVIOUS 和 NEXT 按钮很好，但对于顶部的 TABS 则不然，它们一直处于活动状态。

我知道 onTabClick 和 onTabShow 方法，但我不清楚如何检查已完成的步骤或未完成的步骤。

Answer 1

这个怎么运作

• 示例基于http://vadimg.com/twitter-bootstrap-wizard-example/examples/validation.html
• onTabClick- 基本上它的工作原理与onNext. 它验证当前选项卡的表单字段，一个区别是我正在检查单击的选项卡是上一个还是下一个（通过比较currentIndex和nextIndex参数），如果它是前一个，则不会验证任何表单字段。同样重要的是不允许从例如 1 跳到 3 步，只能从 1 到 2、2 到 3 等（感谢 @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;
      }
    }
  });
});

代码笔