Use preventDefault() to prevent Slider moving

Design help Custom code
1

Hi, can we use any method of preventDefault or similar to stop the slide from moving to the next slide on a button click?

My scenario is as follows, I have a Flowbase form in a slider. I want the user to submit a certain field input, before being allowed to move forward. I want to use Javascript to prevent the slide from moving based on whether the user has submitted any input.

Regards,

Here is my site: Quickscan

2

hi @pepfs thepreventDefault() is function that prevents form submission nothing else. You need some validation to validate if all inputs have value, like text, checked, option value etc. When validation return true you can for NEXT button remove initial state “disabled” .

… a long time ago I have posted response with simple example so here it is again.

Hope this will make sense and point you right direction

3

SA5 has a slider control library, and multistep forms is primarily what I built it for.
It doesn’t have callback gating [yet], instead you would create your slider without native slider navigation ( just hide it ), and then you’d tell it when to navigate from your own JS.

e.g.;

  • Go to the next slide when the user click a Next button and the current form page is filled out properly
  • Offer step 1 to 5 buttons at the top, but only navigate where the user is allowed based on their multiform form progression state.

Here’s a generic demo and the docs and cloneable;

https://webflow-smart-elements.webflow.io/slider

4

@Stan @memetican thanks guys. I will have a look and report back if I have any further issues