jQuery SmartWizard step validation, prevent next step

Question

I am currently using SmartWizard lib (v5), which consists of three steps. Each step depends on the completion of the previous one; for instance, the first step involves a registration form, followed by an OTP (One-Time Password) verification in the next step. I am aiming to implement proper validation such that if my AJAX call returns an error, the user will not be automatically forwarded to the next step. I have managed to achieve this functionality successfully. However, another issue I am encountering is that if a user manually adds a URL fragment like #step-2, the second step will be displayed even if the first step is incomplete. In such cases, I want to enforce the display of the previous step instead. I checked documentation and there is no other option instead of using onLeave and showStep events

Here is the code:

var ajaxInvoke = false;
$('#smartwizard').on('showStep', function (e, anchorObject, stepNumber){
    if(!step1Completed){
        $('#smartwizard').smartWizard("goToStep", 0);
    } else if(!step2Completed){
        $('#smartwizard').smartWizard("goToStep", 1);
    }
})
$('#smartwizard').on("leaveStep", function (e, anchorObject, stepNumber) {
    if (stepNumber === 0 && ajaxInvoke === false) {
        ajaxInvoke = true
        ...
        $.ajax({ params }}).then(function(response) {
                if(response.success){
                step1Completed = true;
                $('#smartwizard').smartWizard("next");
                ajaxInvoke = false;
            }, function(){
            ajaxInvoke = false;
        })
        return false;
// the same logic is for step 2

Now i was wondering how i can prevent user to go to the next step if ajax returns error and also if user adds #step-2 to move to previous step?

Answer 1

You should disable the URL access with the following Smart Wizard setting :

  enableUrlHash: false