Validating a multi-page form

This will probably turn into multiple questions as I work my way through it but I'm in need of some serious JQuery help.  I've created a multi-part form based on the the example at  In that demo, the validation is fairly simple - designating required fields and pulling error messages from the form element titles.

My form is a lot more complex than the demo - and I'm in over my head with implementing the validation.  For instance, in the demo, the errors are coming right after the form element.  In my case, I want to designate the fields I want validate, create the rules and specify where I want to put errors with a class depending on whether they are errors or not.  I'm using the Blueprint CSS framework and it already has classes built for such things but, as I said, I can't figure out how to make that work.

Ideally, I'd like to be able to change the validation method in the demo as well and substitute one that I'm more familiar with - like:

				errorPlacement: function(error, element) {
					if(element.attr("name") === "name") {
			groups: {
				capacityGroup: "progMin progMax",
			rules: {
		 		fName: "required",
			messages: {
				fName: "*First Name is required",

Open in new window

So, I surely hope someone can help with this.  I'm attaching the demo with an added dive for an error message and the stylesheet so it should work just out of the box.   I'd really like to change the way the form is validated so that it will still validate from page to page before being submitted but let me specify the required fields, write my own rules and messages and specify where those messages will display.

If I could offer 1000 points, I would.  Much appreciation in advance.

Who is Participating?
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Check out this jquery option that may be easier or at least get your running faster
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
First, I would not spend too much time with validation on the client side.  Ultimately, you will want to validate on the server side even if you are validating on the client side.  Some basic validation on the client side can help prevent unnecessary calls to the db and possibly speed things up but you still need the serverside validation before updating your db.

For your situation, the "pages" are not really pages.  Instead, each section would simply be a div.  If you have 3 pages, then you have your form and 3 divs where 2 are hidden at a time. Each time you click next, you hide the previous div and view the next.

Now when you finally submit your form on the last "screen", you are actually submitting the entire form.

Another way to approach this is to have 3 separate pages where page 1 submits to page 2 and page 2 puts page 1 data into hidden fields.  Then to page 3 and finally submitting the data.  With this method you have 3 separate page refreshes.  I think the first is the way to go.
saabStoryAuthor Commented:
Correct - the majority of the validation will be done server side but I still need the client side to make sure everything is filled out, addresses match (for some reason, that's a big one - client mentions it every time we talk), etc.

You are also correct that the 'pages' are divs - unordered list element actually - and not really pages at all. Nevertheless, the demo is doing validation per 'page' based on a class and I need to know how to open that up so I can add more rules and target messages.

I've done this before with single page forms many times - it's the false pagination that's throwing me in this case.  

Moving to a true multi-page form isn't an option for me at this point as the whole thing is due in about 10 days and it's a very complex form.  Ideally, I'd like to get the inline validation working but, if not, I can always revert to the old javascript alert style if necessary.
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Assume you have below html
     <div class="1">
          <input id="name">
          <button id="step1">Next</button>
     <div class="2">
           <input id="phone">
          <button id="step2">Next</button>
     <div class="3">
           <input id="email">
          <button id="step3">Next</button>

Open in new window

What you will do is start off hiding div class 2 and 3.  On the click of id step2, validate the input name.  If it is ok, hide class 1 and show class 2.  If it is not ok, then show the error message.  Then repeat.

When you get to step 3, you would validate on the click of id step3, and if it is good, submit the form via js/jquery.

Another option would be to validate each input after it is updated/changed.  In your js/jquery, not allow the next button to work until all errors are fixed.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.