Can we have a form with 3 steps in a carousel?

Question

I would like to remove buttons (back and proceed) in each step of the form and make the steps swipable, and when user swipes without completing/give a wrong input in any of the field in the step, the step cannot be swiped and it gives an error message to fill the unfilled fields. it's just like a "form Wizard with swipable carousel"

Answer 1

Android native app' means using Java... so swipe is easily handled to switch between android views... but inside a browser (html page) or inside a webview (html integration in an android view), swipe gesture need to be custom implemented in JavaScript, by watching built-in mouse/gesture events... and is probably too much effort in this case.

However, I cannot really help in android nativ dev (Java), as I have just basis of Java and quite no practices, even more in android specific development (I only have great lines in mind, but doesn't know anything about form submitting for example ^^)...

Answer 2

What's the targeted support: web page, android app' (in this case what targeting language(s)), other?
What's your actual code attempt/base?

I can do it on web page, without the "swipe" functionnality, wich is harder/longer to implement (or require use of third-party tools/frameworks)
Technically, you just have to keep all your 3 steps/parts of the form elements inside once <form> element, even if you handle them separatly on display, showing the submit button only in the last part...

And you can implement back and next kind of controls (being careful that they don't act as submit button) to switch between the different parts of the form instead swipe functionnality ;)

All that stuff can be done in pure Css, or you can help you with vanilla JS as well as using frameworks like JQuery (first solution of pure Css is the better one, as your carroussel will be working even if JS is desactivated or absent :P)

Answer 3

Check this code:
https://code.sololearn.com/WtYAZZfOlIoJ/?ref=app

... where I have adapted this other one to handle form instead of just text content:
https://code.sololearn.com/WxWFo7C8KNNV/?ref=app

As this two code use radio button for interactivity avoiding JS, in the <form> result you need to filter the 'tabview' field name, wich carry state of tab displayed (as user need to see the submit button to be able to click it, the radio state will be the corresponding tab in wich is the button)...

Answer 4

Why did you mark my answer as best, and then retrieve it?

Answer 5

sorry it's a double press

Answer 6

thank you very much visph. this form is for android native app. and I would like to add swipe as a means of validation for each step. can you say weather it is possible at all? if so, is it too much effort to add swipe validation? how can we add it? (please let me know in brief)

Answer 7

thank you once again visph.. so can you say that adding swipe validation to android form is possible and easy? I'm not making it for desktop.. is only for android native.