Solved

Validating a multi-page form

Posted on 2013-12-07
4
592 Views
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 bassistance.de.  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:

			$("#theForm").validate({
				errorPlacement: function(error, element) {
					if(element.attr("name") === "name") {
						error.appendTo("#nameError");
					}
			},
			
			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.

  multiTest.htmstyle.css
0
Comment
Question by:saabStory
  • 3
4 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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.
0
 

Author Comment

by:saabStory
Comment Utility
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.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
Assume you have below html
<form>
     <div class="1">
          <input id="name">
          <button id="step1">Next</button>
     </div>
     <div class="2">
           <input id="phone">
          <button id="step2">Next</button>
     </div>
     <div class="3">
           <input id="email">
          <button id="step3">Next</button>
     </div>
</form>

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.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
Comment Utility
Check out this jquery option that may be easier or at least get your running faster http://www.dbarnes.info/jWizard/#Demonstration
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to dynamically set the form action using jQuery.
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now