I buildinge a multi page form and im using a slider for te pages. but when i click on tab on the keyboard or use mu one password to autofill the inputs on the first page the sliders goes half way between pages. is there a way to make the page only go to the next slide when the next button is clicked?
The slider has a bunch of build in UX behavior like navigation key bindings and likely some a11y features. Likewise one password does as well- it will fill in a field and then try to scroll it into view so that you can see verify its work.
So basically you’ve got a mess trying to use both.
I can’t speak to those aspects, but in your follow-up question about slider navigation, I have some tools in SA5 that allow you to choose the slide with code. It doesn’t prevent the slider from sliding otherwise however ( thumb swipe, timer nav, tab key, etc. )
Honestly if you’re wanting to control the progress a slider feels like a bad choice here. A tab element might do better, or might not. Or perhaps a custom slider library like swiperjs. Or just build your own custom multi-step form container and possibly use GSAP if you want page-change animations.
The only way is script. I’d hide the tabs, or else use JS to prevent subsequent tabs from being clicked.
To validate the fields on a tab, your JS would forEach on all of the elements on that tab and use reportValidity to determine the validation state. That will check required, field type, and pattern rules, which are usually enough for most validation scenarios.
Build it as a function so that you can also get a true/false back. When the user clicks the next button, you trigger it, and only switch the tab if it returns true. False will automatically trigger the error messages.
Drop me a line with the details if you need this built out, I’ll estimate it for you.
There are some solutions out there that might help as well if you’re ok with a monthly fee and a small learning curve. I’ve not tried this one, but it looks well designed.