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

Question

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

由于我在此表单中使用步骤验证，因此我想阻止用户在未验证的情况下继续执行这些步骤。这对于向导底部的 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;
      }
    }
  });
});

CODEPEN

Answer 2

这有效，不允许您跳过标签，除非它们是有效的，如果您尝试跳过，您将最终进入第一个无效标签（例如，如果 tab1 和 tab2 有效，tab3无效，你点击 tab4，你最终会进入 tab3）

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;
        }
      }
});

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

Bootstrap Form Wizard - Preventing Progress until Step is Validated

forms

jquery

wizard

twitter-bootstrap

工作原理

CODEPEN