I am using http://vadimg.com/twitter-bootstrap-wizard-example/ and so far, so good.
Since I'm using Step Validation with this form, I would like to prevent the user from progressing through the steps without validating them. This is fine with the PREVIOUS and NEXT buttons at the bottom of the wizard, but not so much with the TABS at the top, that are constantly active.
I am aware of the onTabClick and onTabShow methods but I'm not clear on how to check for completed steps or incomplete steps.
How it works
onTabClick
- basically it works the same asonNext
. It validates form fields of the current tab, one difference is that I'm checking if clicked tab was previous or next (by comparingcurrentIndex
andnextIndex
parameters), if it is previous, it's not validating any form fields. It's also important not to allow jumping from for example 1 to 3 step, only from 1 to 2, 2 to 3 etc. (thanks @imjosh).CODEPEN