?
Solved

accordion wizard for bootstrap with form and validation

Posted on 2014-11-30
9
Medium Priority
?
1,663 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
WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

 
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 2000 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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

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…
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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…

771 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