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

Posted 2023-05-08

【中文标题】引导表单向导 - 在验证步骤之前阻止进度

【英文标题】：Bootstrap Form Wizard - Preventing Progress until Step is Validated

【发布时间】：2017-04-30 02:13:42

【问题描述】：

我正在使用http://vadimg.com/twitter-bootstrap-wizard-example/，到目前为止，一切都很好。

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

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

【问题讨论】：

你想完全禁用顶部的标签链接吗？

一开始可能，但是一旦一个步骤完成，用户应该可以选择返回到任何已完成的步骤。所以说有 5 个步骤，用户在第 4 步 - 他们应该能够随时返回到第 1,2 和 3 步 - 启用这些步骤的选项卡将是用户返回的最快方式到那些标签内容页面。因此，逻辑很可能是：如果有效，则启用选项卡，转到下一个选项卡。

【参考方案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

【讨论】：

我认为不需要 tabNumber 变量。此外，我还添加了一项检查： if (index > currentIndex+1) 以防止跳过未验证的选项卡。我将所有验证逻辑组合成一个函数，由两个事件处理程序调用。 jsfiddle.net/wr5tv8em/3

你是对的！我会改变这个，但我们需要你的第二次检查吗？例如，如果您有 5 个步骤并且您在第 3 步，则此时 1 和 2 不可能无效。

啊，好的，我现在明白了，当第一个选项卡有效时，我可以跳到第 3 步。

@imjosh 你知道如何从第 1 步跳到第 3 步吗？ （必须在途中检查第 2 步）。我知道 validate jQuery 插件提供了ignore 选项，如果你将它设置为ignore: []，那么所有字段都会被检查（甚至是隐藏的）。问题是它会阻止从第 1 步跳转到第 2 步（因为它会检查第 2 步中的字段并且它们是空的）。

@makshh 解决了它。只是将其添加为答案，因为系统抱怨太多 cmets

【参考方案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;
        
      
);