使用带有 ajax 和 php 的 Smart Wizard 4 [关闭]

Question

我发现了一个有趣的 jquery 插件来创建一个向导，它的名字是 Smart Wizard 4。我希望能够在第二步之后停止用户，等待邀请码被插入并从我的 php 脚本中验证。任何人都可以建议我实现这一目标的方法吗？我从来没有使用过这个插件，所以在验证完成之前我无法弄清楚如何锁定向导。另外我想添加一个需要在第二步之后完成的表格，任何建议都将不胜感激。

更新：

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);
                  }
                });

              }
        }
    });

我正在测试建议的代码，但我遇到的问题是用户无法通过我的代码实现继续执行向导步骤。如果代码正确，向导将不会进入下一步，但如果插入错误代码，向导将停止用户。有什么建议吗？

Answer 1

documentation 中有 cmets，其中一个有一些代码阻止您继续。以下是我认为可行的方法：

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;
});

cmets 中的代码有更多的代码来添加一些颜色和东西。在 ajax 解决之前禁用下一个按钮可能是个好主意，并且可能添加一个微调器。

这永远不会超过一次 ajax 请求，因此会缓冲继续进行。如果您希望它重做查询，您需要在步骤 2 中删除 !okToPass，而是在 ajax 请求之前将其设置为 false。