CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3twitter-bootstrap-wizard
Pierce McGeough
Pierce McGeough

Reputation: 3086

Stop Bootstrap form wizard focusing when clicking next

I am using the Bootstrap form wizard and when the user clicks the continue button they are moved to the next tab but the page scrolls down

I've looked in the jquery.bootstrap.wizard file that holds the script but cannot find anything to do with focus or animate.

If i remove this code the scroll won't happen but the back and final submit button dissapears

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

Upvotes: 3

Views: 1817

Answers (2)

Basheer AL-MOMANI
Basheer AL-MOMANI

Reputation: 15327

is you are using Jquery validation

use this 

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

look how to use it 

'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();
      ...
}

Upvotes: 0

Thanh Lam
Thanh Lam

Reputation: 696

You should add scrolltop script into onTabShow event:

1. Scrolltop script

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

2. OntabShow formwizard event :

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

Upvotes: 0

Related Questions