artoodetoo / formToWizard

Turn any webform into multi-step wizard with jQuery
MIT License
55 stars 26 forks source link

jQuery validate with goToStep #6

Open colapsnux opened 5 years ago

colapsnux commented 5 years ago

Is there a way where 'goToStep' can validate field before run to the desired step ? It work with 'PreviousStep' and 'NextStep' my field are validated and it doesn't continue if some field are not completed. Any function/tips for that it will work will be much appreciated Thanks in advance

jaquer commented 2 years ago

I should preface this by saying that I am a JavaScript newbie. I know this is old, but just in case it helps somebody else in the future, this was my solution to this problem:

             options = $( element ).data( 'options' );

             commands = {
-                GotoStep: function( stepNo ) {
-                    var stepName = "step" + (--stepNo);
+                GotoStep: function( data ) {
+                    var stepName = "step" + (--data.stepNo);

                     if( $( '#' + stepName )[ 0 ] === undefined ) {
-                        throw 'Step No ' + stepNo + ' not found!';
+                        throw 'Step No ' + data.stepNo + ' not found!';
                     }

-                    if( $( '#' + stepName ).css( 'display' ) === 'none' ) {
-                        $( element ).find( '.stepDetails' ).hide();
-                        $( '#' + stepName ).show();
-                        selectStep( stepNo );
+                    if( options.validateBeforeNext(data.element, $("#" + data.currentStep)) === true ) {
+
+                      if( $( '#' + stepName ).css( 'display' ) === 'none' ) {
+                          $( element ).find( '.stepDetails' ).hide();
+                          $( '#' + stepName ).show();
+                          selectStep( data.stepNo );
+                      }
                     }
                 },
                 NextStep: function() {

This also required that I pass two extra parameters to the 'PreviousStrep' call:

$f.formToWizard("GotoStep", {stepNo: 2, element: $("form#formId"), currentStep: "step0"});

Where stepNo is the step you want to go to, and step0 is the ID of the generated ID of the current step, zero index based.

I know, it's convoluted, but I don't know enought JS/jQuery to make it cleaner. Again, just sharing in case it helps somebody.

jaquer commented 2 years ago

Never mind. I looked into it a little more and found a better solution. See #9.

You'll have to call it like this:

$f.formToWizard("GotoStep", "step0")

where step0 is the ID (without the #) of the div to be validated. I can't find a way to automate it.