到達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 -> 2- 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類。

奇怪的？

我進行了截屏，可以使您更輕松地了解我的問題。

鏈接

我已經厭倦了好幾個小時，無法找到解決這個問題的方法； /希望你們可以幫助我解決這個奇怪的問題。 謝謝。

Answer 1

就像您在評論中聲明的那樣， $('#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);
});

這樣，您可以在控制台中看到未驗證的字段。