Bootstrap Tour : dont move to next step if current step input filed is empty

Question

In the bootstrap walkthrough we have next and prev buttons. In this on click next button we move to next step.

But I want to add condition in that If that input filed is empty then walkthrough should not move to next it should stay on current step only.

Following is reference code:

rec = {
        aa: responseData[i].fields.aa,
        bb: responseData[i].fields.bb,                  
        cc: responseData[i].fields.cc,
        element: responseData[i].fields.element_selector,
        placement: responseData[i].fields.modal_placement,      
        title: responseData[i].fields.modal_title,
        content: responseData[i].fields.modal_content,
        onShow: show_fn,        
        onNext : function () {  
                    var dir = 'next';
                    this_selector = this.element;
                    this_selected_elem = $(this_selector).find('option:selected').val();                                     
                    console.log(this_selected_elem); 
                    if(this_selected_elem == ''){
                        console.log('--prev---');                                                                                
                    }                               
                }   
    }

//rec is pushing in allRec array.

aps.workFlow.allRec.push(rec);



for(var i = 0 ; i< aps.workFlow.allRec.length; i++){
    if (aps.workFlow.allRec[i].aa == walkthroughType){
        element_selector = aps.workFlow.allRec[i].element;
        selected_elem = $(element_selector).find('option:selected').val();
        open_elem = aps.workFlow.allRec[i].onShow;  
        if(selected_elem == undefined || selected_elem == ''){              
            aps.workFlow.allRec1.push(aps.workFlow.allRec[i]);//Adding records in allRec1 array which is going to pass as walkthrough steps.                            
        }                                           
    }   
}
aps.walk.setupBootstrap();  // this is the function which is having tour steps setup.



aps.walk = {
    setupBootstrap : function(){    
        //dir = 'next';
        tour = new Tour();  
        tour.end(); 
        //tour.addSteps(aps.workFlow.arrayRec1);    
        console.log('-----aps.workFlow.allRec1-------------')
        console.log(aps.workFlow.allRec1)
        tour.addSteps(aps.workFlow.allRec1);    
        tour.init();    
        tour.start();

        if (tour.ended()) { 
            $('<div class="alert alert-info alert-dismissable"><button class="close" data-dismiss="alert" aria-hidden="true">&times;</button>You ended the demo tour. <a href="#" data-demo>Restart the demo tour.</a></div>').prependTo(".content").alert();
            tour.restart(); 
        }   

        $(document).on("click","#proposal_command_list #create_tour", function(e) {
            e.preventDefault();
            if ($(this).hasClass("disabled")) {
                return;
            }           
            //tour._options.steps = aps.workFlow.arrayRec1      
            tour._options.steps = aps.workFlow.allRec1      
            return $(".alert").alert("close");          
        }); 
        //tour.restart();
    }
}

Answer 1

I know this is old but I was trying to do the same thing and came across this question. Here's what I found and my (hacky) solution.

There is a .goTo() function but it does not seem to work in a step's onNext event. However, it does work in a step's onShown event. I ended up validating on the current step's onNext and then using .goTo() on the next step's onShown event. I suppose you could do both the validation and step redirection on the next step's onShown event but that didn't work as well with my use case.

Here's the fiddle with the code: https://jsfiddle.net/9qvqqoaf/1/

And the code in the fiddle:

HTML

Input 1 <input type="text" id="text1" /><br><br>
Input 2 <input type="text" id="text2" /><br><br>
<input type="submit" id="submit" value="submit" />

JS

var tour = new Tour({
    steps: [
        {
            element: "#text1",
            title: "Form",
            content: "Enter text for Input 1.",
            onNext: function (tour) {
                validateStepInput(tour);
            }
        },
        {
            element: "#text2",
            title: "Form",
            content: "Enter text for Input 2.",
            onNext: function (tour) {
                validateStepInput(tour);
            },
            onShown: function (tour) {
                checkPreviousStepValid(tour);
            }
        },
        {
            element: "#submit",
            title: "Form",
            content: "Submit the form.",
            onShown: function (tour) {
                checkPreviousStepValid(tour);
            }
        }
    ]
});

tour.init();
tour.start();

var invalidStep = -1;
function validateStepInput(tour, inputSelector) {
    var step = tour._options.steps[tour.getCurrentStep()];

    var $attachedEl = typeof inputSelector == 'undefined' ? $(step.element) : $(inputSelector);

    if ($attachedEl.length > 0 && $attachedEl.is('input')) {

        if ($attachedEl.attr('type') == 'text') {
            var val = $attachedEl.val();
            if (val.length == 0) {
                invalidStep = tour.getCurrentStep();
            }
        } else if ($attachedEl.attr('type') == 'radio') {
            var anyChecked = $attachedEl.is(':checked');
            if (!anyChecked) {
                invalidStep = tour.getCurrentStep();
            }
        } else if ($attachedEl.attr('type') == 'checkbox') {
            var anyChecked = $attachedEl.is(':checked');
            if (!anyChecked) {
                invalidStep = tour.getCurrentStep();
            }
        }
    }

    return invalidStep == -1;
}

function checkPreviousStepValid(tour) {
    // .goTo only seems to work in the onShown step event so I had to put this check
    // on the next step's onShown event in order to redisplay the previous step with
    // the error
    if (invalidStep > -1) {
        var tempStep = invalidStep;
        invalidStep = -1;
        tour.goTo(tempStep);
    }
}