Javascript 引导程序：如果当前步骤输入字段为空，则不要移动到下一步

在引导演练中，我们有“下一步”和“上一步”按钮。 在点击下一步按钮时，我们进入下一步

但我想添加一个条件，若输入字段为空，那个么演练不应该移动到下一步，它应该只停留在当前步骤上

参考代码如下：

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正在推入allRec阵列

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

aps.workFlow.allRec.push（rec）；
对于（var i=0；i

我知道这很古老，但我也尝试着做同样的事情，遇到了这个问题。这是我的发现和我的（黑客）解决方案

有一个.goTo（）函数，但它在步骤的onNext事件中似乎不起作用。但是，它在step的onShown事件中确实有效。我最后在当前步骤的onNext上进行了验证，然后在下一步的onShown事件上使用了.goTo（）。我想您可以在下一步的onShown事件上同时进行验证和步骤重定向，但这在我的用例中并不适用

下面是对代码的修改：

以及小提琴中的代码：

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" />

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);
    }
}