Would it be possible for someone to give us some idea of what is happening with an issue related to navigation within webflow’s forms?
A portion of our project allows the end-user to complete a registration process --7 stages.
When you press ‘Next’, you will be transferred to the next step only if the required data is provided.
At every navigation component, we masked the ‘Next’ button and over-imposed another one that allow us to control the process.
<div class="navigation">
<div class="w-row">
<div class="w-col w-col-6 w-col-small-6 w-col-tiny-6 prevwrapper"></div>
<div class="w-col w-col-6 w-col-small-6 w-col-tiny-6 w-clearfix nextwrapper">
<a id="nexton_1-7" class="button next" href="#">Next</a>
<a id="nextoff_1-7" class="nextstep" data-ix="step2">Next >></a>
</div>
</div>
</div>
Then, when everything is ‘OK’ --validated-- we call a remote trigger of the orignal --undelaying-- button.
function register_continue( $section ) { alert('Successfully Validated section '+$section+' of '+$totals+'!' ); $( '#nextoff_'+$section+"-"+$totals ).trigger( "click" ); return true; }
And this is an abstraction to the requirements so we can have a fine and very granular level of control in what we validate and how.
$( '#nexton_1-'+$totals ).on( "click", function() { $register = 1; if ( $validation === true ) { $required = [ 'Gender/Sexuality', 'Year of Birth', 'Month of Birth', 'Day of Birth' ]; var $submit = [ validate('gender'), validate('dobyear'), validate('dobmonth'), validate('dobday') ]; if ( $submit.indexOf(false) < 0 ) { register_continue( $register ); } else { listings( $required, $submit ); } } else { register_continue( $register ); } });
Note: As you can see the $submit array stores the results and if it does not have a single element in it set as false it continues by calling the triggering mechanism for the next button.
This works great --not perfect yet-- on web browsers in desktop but when it gets to mobile devices, the next button trick --remotely activate it-- does not work at all.
We have tested that each component of the process and it tells us that in every media the script arrives and enters each code block but the ‘NEXT’ effect does not happen on mobile devices.
We do not know enough about WebFlow but is there a way to avoid doing these tricks and just use the default actions in the navigation to do not continue if validation is not completed?
Any suggestions on how this could be done?