Question

我正在努力使用jquery步骤向导 - http://www.jquery-steps.com/ 基本上，我的应用程序是基于Zend Framework构建的，它也通过ajax进行表单验证。

在之前的版本中，在我决定使用jquery steps插件之前，它看起来像是：

  var form = $('#document-form');
  var step1 = $('#step1');
  var step2 = $('#step2');

  step1.find('button[type="button"].next').click(function (e) {
      e.preventDefault();

      verifyForm(step1, function() {
          slideToNextStep(step2);
      });
  });


  step2.find('button[type="button"].next').click(function (e) {
      e.preventDefault();

      verifyForm(step2, function() {
          slideToNextStep(step2);
      });
  });

我想要实现的目标：

我需要使用自己的函数来验证表单 - “verifyForm（step，callback）;

我当前的jquery步骤向导设置在这里：

var form = $('#document-form');
form.children('div').steps({
   headerTag: "h3",
   bodyTag: "section",
   transitionEffect: "slideLeft",
   autoFocus: true
});

如何强制此插件使用我的功能并将当前步骤传递给它？

最终我可以在每一步中创建一个隐藏按钮，然后在点击“下一步”时触发它 - 如果表单没问题，那么接下来，如果不是 - 中止。但是，我不知道该怎么做。

提前致谢！

Answer 1

您必须为jquery步骤中的每个更改步骤创建一个方法，并在那里调用您的函数。如果需要，您甚至可以在非常具体的步骤中调用您的函数。

var form = $('#document-form');
form.children('div').steps({
   headerTag: "h3",
   bodyTag: "section",
   transitionEffect: "slideLeft",
   autoFocus: true,
   onStepChanged: function(e,Dest,Src){
         console.log('Coming from ' + Src + ' going to ' + Dest);
   }
});

https://github.com/rstaib/jquery-steps/wiki/Settings#events

jQuery Steps - 按钮单击时的自定义验证

我想要实现的目标：

1 个答案: