Jquery.steps Skip A Step

I am using the jQuery.steps plugin (http://www.jquery-steps.com/) to guide the users in an internal webpage. So far so good, now I am facing a little issue, I do have 5 Steps at th

Solution 1:

In the jquery.steps.js

add class to <ul role=\"tablist\" class=\"tablist\"></ul> (line 1037)

change functions goToNextStep & goToPreviousStep to

var length_custom; 
functiongoToNextStep(wizard, options, state)
{
    length_custom = $('ul.tablist li.skip').length; 
    var newIndex = increaseCurrentIndexBy(state, 1);
    var anchor = getStepAnchor(wizard,  newIndex),
    parent = anchor.parent(),
    isSkip = parent.hasClass("skip");
    if(isSkip){
        goToStep(wizard, options, state, newIndex + length_custom)
    }else{
        returnpaginationClick(wizard, options, state, newIndex);
    }
}

functiongoToPreviousStep(wizard, options, state)
{
    var newIndex = decreaseCurrentIndexBy(state, 1);
    var anchor = getStepAnchor(wizard,  newIndex),
    parent = anchor.parent(),
    isSkip = parent.hasClass("skip");
    if(isSkip){
        goToStep(wizard, options, state, newIndex - length_custom)
    }else{
        returnpaginationClick(wizard, options, state, newIndex);
    }
}

Then add these functions at the bottom of your file

$.fn.steps.skip = function (i) {
    var wizard = this,
    options = getOptions(this),
    state = getState(this);
    if (i < state.stepCount) {
        var stepAnchor = getStepAnchor(wizard, i);
        stepAnchor.parent().addClass("skip");
        refreshSteps(wizard, options, state, i);
    }
};
$.fn.steps.unskip = function (i) {
    var wizard = this,
    options = getOptions(this),
    state = getState(this);
    if (i < state.stepCount) {
        var stepAnchor = getStepAnchor(wizard, i);
        stepAnchor.parent().removeClass("skip");
        refreshSteps(wizard, options, state, i);
    }
};

Now, initialize which step you want to skip

$("#wizard").steps('skip', index);
$("#wizard").steps('skip', index);// if you want to skip more than one step
$("#wizard").steps('skip', index);// if you want to skip more than one step

Disable skip

$("#wizard").steps('unskip', index);
$("#wizard").steps('unskip', index);// if you want to unskip more than one step
$("#wizard").steps('unskip', index);// if you want to unskip more than one step

Solution 2:

There are events called onStepChanging , onStepChanged which could be passed to the form.steps . You can write a function to validate your form and steps in that and based on the currentIndex,newIndex you can trigger the next tab.

I am attaching here the link for the same which would help you.

Solution 3:

I came up with a solution based on ajl80 answer.

But I had to change the goToNextStep & goToPreviousStep to:

var length_custom;
function goToNextStep(wizard, options, state)
{
  varvalid=false;
  vari=0;
  while (!valid) {
    i++;
    varnewIndex= increaseCurrentIndexBy(state, i);
    varanchor= getStepAnchor(wizard, newIndex),
    parent = anchor.parent(),
    isSkip = parent.hasClass("skip");
    if (!isSkip) valid = true;
  }
  return paginationClick(wizard, options, state, newIndex);
}

function goToPreviousStep(wizard, options, state)
{
  varvalid=false;
  vari=0;
  while (!valid) {
    i++;
    varnewIndex= decreaseCurrentIndexBy(state, i);
    varanchor= getStepAnchor(wizard, newIndex),
    parent = anchor.parent(),
    isSkip = parent.hasClass("skip");
    if (!isSkip) valid = true;
  }
  return paginationClick(wizard, options, state, newIndex);
}