Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Stepper skip steps

Yutaka priority asked 6 years ago


MDB-PRO 4.5.13
Hi, how can i skip steps?,  i mean, if i am in the firts step and i want to go to the third step using a button (without click on the step), how can i do it?

Mikołaj Smoleński staff answered 5 years ago


Hi there,

You need to check inside the validationFunction if it's false and then don't call nextStep funciton.

https://mdbootstrap.com/docs/jquery/components/stepper/#validation

Best regards


jar8 free answered 5 years ago


if the function data-feedback="validationFunction" is false i want to stay in the step, how can i do it?


Jakub Mandra staff answered 6 years ago


According to the documentation you can't skip steps. I will send this as an idea for extension to JQ team to discuss.   Best, Jakub

Yutaka priority commented 6 years ago

Is there an  method to make validation and decide if the user can go to the next step?

Example: 

I have 3 files and i need to validate if the files has been uploaded else dont let to the user go to the next step.


Jakub Mandra staff commented 6 years ago

You can use validation stepper with file file input.

You can use built in validation (checks if input is fullfiled) or write your own function.

Also we have some form validation examples.


MrTaliesin pro commented 5 years ago

I found a way that worked for me to manipulate the steps. It is clearly a work-around but it seems to function. On the button, I use the data-feedback attribute to call a function prior to submitting

<button class="waves-effect waves-dark btn btn-sm btn-primary next-step" data-feedback="SaveQuestions">CONTINUE</button>

function SaveQuestions { ...Code to save questions... $({stepper}).nextStep();}

Then, in my function it ends with the $({stepper}).nextStep();. Add a callback function to the next step such as $({stepper}).nextStep(gotoStep);

Then in the function gotoStep, you specify which step needs to load. In this example, it will jump to step 3:

function gotoStep() { $({stepper}).openStep(3); return false;}

Hope that helps.


Jakub Mandra staff commented 5 years ago

I've tried it and it works. Good job!

So you can just use openStep(step_num) to go to whatever step you want.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: PC
  • Browser: Chrome
  • OS: W10
  • Provided sample code: Yes
  • Provided link: No
Tags