Question

在bootstrap演练中，我们有next和prev按钮。在此单击下一步按钮，我们将进入下一步。

但我想添加条件，如果输入字段为空，则演练不应移至下一步，它应仅保留当前步骤。

以下是参考代码：

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

Answer 1

我知道这已经过时了，但我试图做同样的事情并遇到了这个问题。这是我发现的和我的（hacky）解决方案。

有一个.goTo（）函数，但它似乎不适用于step的onNext事件。但是，它确实在step的onShown事件中起作用。我最后验证了当前步骤的onNext，然后在下一步的onShown事件中使用.goTo（）。我想你可以在下一步的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's onShown event in order to redisplay the previous step with
    // the error
    if (invalidStep > -1) {
        var tempStep = invalidStep;
        invalidStep = -1;
        tour.goTo(tempStep);
    }
}

Bootstrap Tour：如果当前步输入字段为空，则不要移至下一步

1 个答案: