Solved

accordion wizard for bootstrap with form and validation

Posted on 2014-11-30
9
1,465 Views
Last Modified: 2016-10-05
Hi

Please could you advise of any examples that use an accordion wizard with a form such that each panel is validated independently rather than validating them all at the end. I am using jquery validation.

To do this would I have to have each panel as a separate form or is it possible to have just one form for the whole accordion? I have not been able to find a single example of this.

Ive seen this plugin which does what i want but the accordion wizard is nicer :) but it doesnt use jquery validation
http://www.jqueryscript.net/demo/Accordion-Slider-Style-jQuery-Form-Wizard-Plugin-Formalize/


Ive also seen this example which doesnt appear to work or have any input
http://stackoverflow.com/questions/20223770/form-inside-bootstrap-accordion-wizard

Any help is much appreciated
Thanks
0
Comment
Question by:andieje
[X]
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
  • 4
  • 4
9 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40472982
0
 

Author Comment

by:andieje
ID: 40473784
But they arent using accordion wizards? I ve already seen then. I want the user to be able to jump to whatever stage in the wizard when they want. This for does not allow this.

Thanks
0
 

Author Comment

by:andieje
ID: 40473791
Unless you can put something along the top or down the side to allow user to jjump tp section?
My boss for example wold like the user to check sectin 7 and then perhaps recehckec section 2 so its not linear
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 58

Expert Comment

by:Gary
ID: 40474370
Well jumping from panel to panel will then require validation of everything again at the end to make sure each section was filled in, so I think you are just making more work for what is ultimately the same thing.
Stick with section by section navigation or just validate at the end.

There is nothing I have come across that does it this way.
0
 

Author Comment

by:andieje
ID: 40479260
i nknow but if its what the customer wants ....
0
 
LVL 58

Expert Comment

by:Gary
ID: 40479284
Then you will need to take one of the examples above and adjust it to your requirements.
0
 

Author Comment

by:andieje
ID: 40480581
Ok, talking to the client the new needs

1) on adding the form then he wants the user to go through the accordion step by step and not 'jump around' steps as it were

2) When editting the form he wants the user to just be able to jump to the relevant section and not follow forward and back arrows. Also i dont know where the submit button would go unless you went right to the end

Have you seen jquery steps? Last i looked you couldnt jump to a specific step but perhaps you can on editing when everything is already filled in?
0
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40481527
This is something you will have to code yourself.
0
 

Expert Comment

by:sfafds sdfa
ID: 41829953
wer
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

732 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