jquery validation integration - multiple forms

[khristos]

jquery validation integration - multiple forms

[kflorence]

Hey Chris. I'm currently traveling in Europe, but I'll get to this when I get back home.

[kflorence]

I would advise against using a wizard in this way. The wizard was essentially designed for use on a single form, though it will work fine with multiple forms (other than the "submit" function which would submit just the first form in the list). I don't really see the benefit of having so many forms. If your desire is to save the contents of each step before going to the next step, this can be accomplished using AJAX (see the jQuery autosave plugin for an example of this). That said, I could foresee certain scenarios where having multiple forms might be advantageous, so I may consider adding in some extra support for this at a later time.

As for the problem at hand, I believe the .validate() method will only work on form submission in your example (which is why it only works on the last step). In order to use .valid(), the .validate() method would need to be called on each form beforehand. So it seems like you would need a combination of what you have as well as the demo code outlined in issue #5.

Some other things I noticed in the examples above: no need to pass the "options" key into the options hash, it should just be: { steps: ".step" } -- though that's redundant because it is the default setting. Also, you should probably move the buttons outside of the steps and just place them at the bottom of the wizard, no need to have duplicates.

A final example should look something like this (untested):

$( '#W1' ).wizard({
    beforeSelect: function( event, step ) {
        return $( state.step ).valid();
    }
}).wizard( 'form' ).validate();

[khristos]

Thanks, Kyle. I followed your suggestion and enclosed all steps in one form (with one set of navigation buttons) to keep things as intended.
I also modified the code above slightly, which seemed to work for me:

$( '#W1' ).wizard({
  beforeSelect: function( event, state ) {
    return state.step.parent('form').valid();
  }
}).validate();

Thank you for your help again.

Chris

[kflorence]

Glad to be of help.