Solved

accordion wizard for bootstrap with form and validation

Posted on 2014-11-30
9
1,222 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
  • 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
 
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
getting id from database 5 37
jQuery UI required not working in safari 9 23
Example unit tests with AngularJS 3 40
Error in JQuery 5 39
Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
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…
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…

895 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

17 Experts available now in Live!

Get 1:1 Help Now