Solved

accordion wizard for bootstrap with form and validation

Posted on 2014-11-30
9
1,327 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Change color of pagination for twbs-pagination 3 46
jquery progress bar 3 55
When we use cache:false ajax? 1 54
jquery check value of radiobutton and checkboxlist 3 29
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
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 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)

856 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