Bootstrap Tour: do not proceed to the next step if the current input input step is empty

Question

In the bootstrap walkthrough, we have the next and prev buttons. In this case, when you click the next button, we proceed to the next step.

But I want to add the condition that if the input file is empty, then the passage of the game should not move on, it should remain only at the current step.

Below is the link 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 inserts an 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 tried to do the same and came across this question. Here is what I found and my (hacker) solution.

.goTo(), onNext. onShown. onNext, .goTo() onShown. , , onShown, .

: https://jsfiddle.net/9qvqqoaf/1/

:

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 onShown event in order to redisplay the previous step with
    // the error
    if (invalidStep > -1) {
        var tempStep = invalidStep;
        invalidStep = -1;
        tour.goTo(tempStep);
    }
}