Use Smart wizard 4 with ajax and php

Question

I've found an interesting jquery plugin to create a wizard it's name is Smart wizard 4. I want to be able to stop the user after the second step to wait until an invitation code was inserted and validated from my php script. Can anyone suggest me a way to achieve this? I've never used this plugin, so I can't figure out how to lock the wizard until this validation is done. Also I want to add a form that need to be completed after the second step, any suggestion will be appreciated.

UPDATE:

var okToPass = false;

    $('#smartwizard').on('leaveStep', function(e, anchorObject, stepNumber, stepDirection){
        window.alert(stepNumber);
        if(stepDirection === 'forward'){
            if(stepNumber === 0 && !okToPass){
              var userEmail = $('#creator-email').val();
              localStorage.setItem('email', userEmail);
              $.ajax({
                type: 'POST',
                data: {user_email: userEmail},
                url: 'event/new/user',
                cache: false,
                success: function(response){
                    okToPass = true;
                    console.log(response);
                }
              });

            }
            if(stepNumber === 1){
              okToPass = false;
              var userCode = $('#creator-code').val();

              localStorage.setItem('code', userCode);
              $.ajax({
                type: 'POST',
                data: {user_code: userCode},
                url: 'event/new/verification',
                cache: false,
                success: function(response){
                  console.log(response);
                    if( response === true ){
                      okToPass = true;
                    }
                    else{
                      okToPass = false;
                    }
                  }
                });
                if( !okToPass ){
                  return false;
                }
              }
              if(stepNumber === 2 && !okToPass){
                var email = localStorage.getItem('email');
                $('#registered-email').val(email);
                $.ajax({
                  type: 'POST',
                  data: {user_code: userCode},
                  url: 'event/new/save',
                  cache: false,
                  success: function(response){
                      okToPass = true;
                      window.alert(response)
                      console.log(response);
                  }
                });

              }
        }
    });

I'm testing the code suggested and I have the problem that the user can't continue the wizard steps with my implementation of the code. The wizard will not go to the next step if the code is correct, but will stop the user if it will insert a wrong code. Any suggestion?

Answer 1

In the documentation there are comments and one of them has some code to stop you from continuing. Here is what I think will work:

let okToPass = false;
$('#smartwizard').on('leaveStep', (e, anchorObject, stepNumber, stepDirection) => {
    if (stepDirection === 'forward') {
        if (stepNumber === 2 && !okToPass) {
            // async code that calls your php API and updates 
            // okToPass based on the result. 
        } else if (stepNumber === 3 && !okToPass) {
            return false;
        }
    }
    return true;
});

The code in the comments had more code to add some colors and stuff. It might be a good idea to perhaps disable the next button until the ajax has resolved and perhaps add a spinner.

This never does the ajax request more than once and thus buffers the go ahead. If you'd like it to redo the query you need to remove the !okToPass at step 2 and rather set it to false before the ajax request.