outer form breaks plugin's next/back button

[tafs7]

I can create a wizard using this plugin successfully, however, if I wrap the outermost div with a form, this breaks the plugin's ability to dynamically create the next/back button in each accordion group.

I've created a JsFiddle that shows the problem being in the selector used to find all form elements in all child accordion group bodies:

var forms = $(".accordion-body .accordion-inner form", $el);

I suppose when you throw in a form around the whole thing, the selector skips the top/first form, since nested forms are generally not optimal.

http://jsfiddle.net/Dm2SU/1/

My goal is to use the accordion to break up my large form into smaller chunks/steps like a wizard. At the end of the page, I have a submit button for the entire form. If there's a better way to do this with this plugin, please let me know.

[tafs7]

ok...quick update....I changed my <form> tags to <section> and then updated the acc-wizard.js to select those section elements. That seemed to solve the issue, since now I no longer have nested forms.

Perhaps an elegant fix would be to provide an option that specifies the element/tag type used as the container of each panel, default to a form. This would allow users to override the default and affect the jquery selector without expectations of the structure of the content.

[siteperform]

Thanks, this is a useful solution. I'm also using the accordion to break up a form and am curious about how others have implemented validation. Any examples would be extremely helpful.

[sathomas]

closing as stale