我有一个多步骤表单,并且我正在使用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步通常为visible类。

奇怪的?

我进行了截屏,可以使您更轻松地了解我的问题。

LINK

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

最佳答案

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

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



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



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

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


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

09-10 10:30
查看更多