Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17


Validating a multi-page form

Posted on 2013-12-07
Medium Priority
Last Modified: 2013-12-14
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.

Question by:saabStory
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39704362
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.

Author Comment

ID: 39704829
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.
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39704934
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.
LVL 53

Accepted Solution

Scott Fell,  EE MVE earned 2000 total points
ID: 39704943
Check out this jquery option that may be easier or at least get your running faster

Featured Post

Use Filtering Commands to Process Files in Linux

Learn how to manipulate data with the help of various filtering commands such as `cat`, `fmt`, `pr`, and others in Linux.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question ( on how to make a page show some balloons animate up a page…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

715 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question