While I think this should work, it is forcing me to fix the validation errors in step 2 before being able to go back.
Is there a way to bypass the validation in step 2 in order to jump back a step?
In the screenshot attached, I made it to step 2 and then clicked on the "Previous " button and I am forced to fix those validation errors before going back.
Theres a bit of weird animation/jumpyness that happens with it but I wont complain any longer, it goes back to the previous step as I asked so thanks for that.
I am using the provided extra page for the registration. I have step 1 and step 2, just like the example.
I am trying to put in a "Previous Step" button on step 2 so that a user can go back and fix something on the first step if needed.
I added this code:
<div class="form-group">
Step 2 of 2 <br /> <a data-step="step-1" style="cursor:pointer;" id="previousStep">Previous</a></div>
While I think this should work, it is forcing me to fix the validation errors in step 2 before being able to go back.
Is there a way to bypass the validation in step 2 in order to jump back a step?
In the screenshot attached, I made it to step 2 and then clicked on the "Previous " button and I am forced to fix those validation errors before going back.
Hi Carlhussey,
I suggest you to add a custom event to previousStep and remove data-step attribute:
jQuery( '#previousStep' ).on( 'click', function( ev ) { ev.preventDefault(); jQuery( '#step-2' ).fadeOut(); jQuery( '#step-1' ).fadeIn(); } );The effect to go back is pretty simple:
https://d.pr/v/AL2YEy
I tested this quickly on the template and it seems to cause duplication issues.
Heres an example vid - https://drive.google.com/file/d/1bkePw6Tvt38oxO7Sujf8R6-DYYywtzDq/view?usp=sharing
Hi again,
I have made small modification that should fix that:
jQuery( '#step-2' ).fadeOut(); jQuery( '#step-1' ).fadeIn( function() { jQuery( '#step-2' ).removeClass( 'current' ); jQuery( this ).addClass( 'current' ); } ); neonRegister.step = 'step-1';So the click event entirely:
jQuery( '#previousStep' ).on( 'click', function( ev ) { ev.preventDefault(); jQuery( '#step-2' ).fadeOut(); jQuery( '#step-1' ).fadeIn( function() { jQuery( '#step-2' ).removeClass( 'current' ); jQuery( this ).addClass( 'current' ); } ); neonRegister.step = 'step-1'; } );I hope this works fine for you now.
Thank you!
Theres a bit of weird animation/jumpyness that happens with it but I wont complain any longer, it goes back to the previous step as I asked so thanks for that.
Issue resolved.
Dear,
I have found the appropriate solution to fix animation as well by adding removeAttr( 'style' ) for step 2 when animation is finished:
Click:
jQuery( '#previousStep' ).on( 'click', function( ev ) {ev.preventDefault();
jQuery( '#step-2' ).fadeOut();
jQuery( '#step-1' ).fadeIn( function() {
jQuery( '#step-2' ).removeClass( 'current' ).removeAttr( 'style' );
jQuery( this ).addClass( 'current' );
} );
neonRegister.step = 'step-1';
} );
I tested it and worked fine:
https://d.pr/v/tZDujn
I hope you like it.
beautiful! thanks so much for the support on this, it means a lot :)
You are more than welcome. I also don't like when something is not completely fixed so I wanted to help you solve this issue as you wanted.
If you have other questions feel free to submit a new ticket as I am setting this ticket as closed now.
All the best for you.