/    Sign up×
Community /Pin to ProfileBookmark

Multiple steps in form checking…

Hey guys,

Ive been coding for a while, but fairly new to JS. I need to create a form to take a lot of specific data from users, and ensure that it is all filled in properly. Since the form is fairly involved, i want to do it in a step by step process, with a few related questions asked at each step. On filling these in the user can press the next (or prev) button to get to the next (or prev) step. Before moving to the next step i plan to check the input for errors, and display error messages appropriately.

I looked into a few ways of doing this, and the method ive come up with is to have each section into a separate css class. That, way as i need each question i can simply show or hide the appropriate section by changing the class’ “display” attribute. (Plus if there is an error in the input, i just change the the error message’s display attrib so it is no longer hidden…etc)

This seems to me to be a fairly simple way of doing the multi stage form thingy (as i really dont wanna avoid the multiple page->cookie/post scene), the only problem is ive never seen it done before…so i was worried that there was some less than obvious reason that no one does this…

I have a simple version up and going, but thought it would be better to check before fully commiting. Any advice/comments would be much appreciated.

(P.S. Sorry about the long post)

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@FangOct 18.2005 — It has been done before.

Remember that users with JavaScript disabled must be able to see the whole form and have error notification returned using server-side scripting.
×

Success!

Help @jamesbf spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...