引导表单向导 - 防止进度直到步骤被验证

时间:2016-12-14 16:45:16

标签: jquery forms twitter-bootstrap wizard

我正在使用http://vadimg.com/twitter-bootstrap-wizard-example/,到目前为止,非常好。

由于我在此表单中使用了步骤验证,因此我希望阻止用户在不验证步骤的情况下完成这些步骤。这对于向导底部的PREVIOUS和NEXT按钮来说很好,但是顶部的TABS并不是那么频繁。

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

2 个答案:

答案 0 :(得分:2)

工作原理

  • 示例基于http://vadimg.com/twitter-bootstrap-wizard-example/examples/validation.html
  • onTabClick - 基本上它与onNext的工作方式相同。它验证当前选项卡的表单字段,一个区别是我正在检查点击标签是上一个还是下一个(通过比较currentIndexnextIndex参数),如果它是之前的,它不验证任何表格领域。同样重要的是不允许从例如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

答案 1 :(得分: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;
        }
      }
});