javascript - 多步形式是到达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 部分)中单击“下一步”按钮，则该按钮不起作用，并且不会将我带到第 5 步(第 5 部分)。第四步(第四部分)是动态生成的步骤(部分)中的第二步(第二部分)。

我认为问题出在这段 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 步并单击“下一步”后，当前第 4 步将获取 hidden 类，接下来的第 5 步将获取 通常可见类。

奇怪吗？

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

<强> LINK

我已经厌倦了几个小时，找不到这个问题的解决方案；/希望你们能帮助我解决这个奇怪的问题。谢谢。

Answer 1

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

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

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

<小时/>

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

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

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