twitter-bootstrap - 单击下一步时停止引导表单向导聚焦

Question

我正在使用 Bootstrap 表单向导，当用户单击继续按钮时，他们将移动到下一个选项卡，但页面向下滚动

我查看了包含脚本的 jquery.bootstrap.wizard 文件，但找不到与焦点或动画有关的任何内容。

如果我删除此代码，滚动将不会发生，但返回和最终提交按钮消失

if($settings.onNext && typeof $settings.onNext === 'function' && $settings.onNext($activeTab, $navigation, obj.nextIndex())===false){
    return false;
}

Answer 1

你是在使用Jquery 验证吗

用这个

    function dontGoToNextStep() {
    $validator.focusInvalid();
    return false;
};

看看如何使用它

'onNext': function (tab, navigation, index) {
        //#region Dont Move Next If there is a Validation Errors
        var $valid = _form.valid();
        if (!$valid) {
            return dontGoToNextStep();
        }
        //#endregion Dont Move Next If there is a Validation Errors

      ....
      if (someCondition)
                return dontGoToNextStep();
      ...
}

Answer 2

您应该将 scrolltop 脚本添加到 onTabShow 事件中：

1. Scrolltop 脚本

$('html, body').animate({
   scrollTop: $("#rootwizard").offset().top
}, 1000);

2. OntabShow 表单向导事件：

 $('#rootwizard').bootstrapWizard({
                'tabClass': 'nav nav-pills',                
                onTabShow:function(tab,navigation,index){   
                    //Animate scrolltop
                    $('html, body').animate({
                        scrollTop: $("#rootwizard").offset().top
                    }, 1000);
                }
  });