达到X步后，多步形式不会进入下一步

Question

我有一个多步骤表单，我使用ParsleyJS来验证表单字段。

<form id="main-form"
      action="process.html" method="post" role="form"
      data-parsley-validate>

  <section id="form-step-1" class="clearfix step1 visible">
    step 1
  </section>

  <section id="form-step-2" class="clearfix step2 hidden">
    step 2
  </section>

  <!-- @@@@@ -->
  <!-- Here are unknown amount of sections generated dynamically. -->
  <!-- HTML output is generated dynamically and added by jQuery. -->
  <!-- I do ajax request and return here HTML code. -->

  <section id="form-step-last" class="clearfix step-last hidden">
    last step
  </section>

</form>

我确实在每个部分都有正确有效的上下按钮，例如：

<span class="btn btn-primary btn-nextstep next" data-current-block="2" data-next-block="3">Next</span>

<span class="btn btn-primary btn-prevstep prev" data-current-block="2" data-next-block="1">Previous<span>

在我的测试用例中，我总共有10个部分，所以它们看起来像：

硬编码步骤：Step1 -> Step2 ->然后动态生成步骤S3, S4, S5, S6, S7, S8, S9 ->，最后一步硬编码为前两步。

如果我在第4步（第4部分）中点击了＆＃34;下一步＆＃34;按钮，按钮不起作用，并没有带我到第5步（第5部分）。 第4步（第4部分）是动态生成的步骤（部分）的第2步（第2部分）。

我认为问题在于这个jQuery代码：

$('#main-form').on('click','.next,.prev', function() {
  var current = $(this).data( 'currentBlock' ),
      next    = $(this).data( 'nextBlock' );
  // only validate going forward. If current group is invalid, do not go further
  // .parsley().validate() returns validation result AND show errors
  if( next > current )
    if( false === $('#main-form').parsley().validate( 'step'+current ) )
      return;
    $('.step' + current).removeClass('visible').addClass('hidden');
    $('.step' + next).removeClass('hidden').addClass('visible');
});

我试图以某种方式调试它，例如。删除了return;行。 结果是它为每个下一步添加了visible类，但在到达第4步并单击next后，当前第4步获得hidden类，下一个第5步通常获得visible类。

古怪？

我制作了一个截屏视频，让您更轻松地了解我的问题。

LINK

我已经厌倦了好几个小时而无法找到解决这个问题的方法; /希望你们能帮我解决这个奇怪的问题。感谢。

Answer 1

就像你在评论中陈述的那样$('#main-form').parsley().validate('step4')返回false。这是因为step4正在验证两个字段而不是1，正如您所期望的那样。

在您的控制台中，如果您这样写：$("[data-parsley-group=step4]")，您将看到这两个输入字段。在下图中，您可以看到另一个字段所在的DOM：

正如您所看到的，名称为“email_address”的字段，即预期在步骤10中验证的字段，实际上已在步骤4中得到验证。这是因为属性data-parsley-group="step4"。如果删除此属性，则会正确验证。

---

如果您遇到过类似的情况，使用$.listen是调试正在发生的事情的一种非常好的方法。我认为step4正在验证两个字段，因为我添加了以下JS：

$.listen('parsley:field:error', function(parsleyField) {
    console.log(parsleyField.$element);
});

这样您就可以在控制台中看到未经验证的字段。