使用 parsley.js 验证多页表单

Question

我正在使用here 找到的多页表单，并尝试使用 parsley.js 验证字段集。我在他们的示例页面上按照他们的步骤进行了多页表单，但我遇到了两个问题之一：

1) 在我点击提交之前，它不会提示未填写的字段，然后在我点击上一个或之前会显示错误 2）当我点击下一步时，我在控制台中收到一个错误，指出它是“next_fs.show();”上的未定义函数

这是下面的表单代码，后面是指向我当前所有代码的链接。

    <!-- multistep form -->
<form id="msform" data-parsley-validate>
    <!-- progressbar -->
    <ul id="progressbar">
        <li class="active">Account Setup</li>
        <li>Social Profiles</li>
        <li>Personal Details</li>
    </ul>
    <!-- fieldsets -->
    <fieldset class="first block1">
        <h2 class="fs-title">Create your account</h2>
        <h3 class="fs-subtitle">This is step 1</h3>
        <input type="text" name="email" placeholder="Email" required data-parsley-group="block1" />
        <input type="password" name="pass" placeholder="Password" required data-parsley-group="block1" />
        <input type="password" name="cpass" placeholder="Confirm Password" required data-parsley-group="block1" />
        <input type="button" name="next" class="next action-button" value="Next" data-current-block="1" data-next-block="2"  />
    </fieldset>
    <fieldset class="second block2">
        <h2 class="fs-title">Social Profiles</h2>
        <h3 class="fs-subtitle">Your presence on the social network</h3>
        ...
<input type="button" name="previous" class="previous action-button" value="Previous" data-current-block="2" data-next-block="1" />
        <input type="button" name="next" class="next action-button" value="Next" data-current-block="2" data-next-block="3" />
    </fieldset>
    <fieldset class="third block3">
        <h2 class="fs-title">Personal Details</h2>
        <h3 class="fs-subtitle">We will never sell it</h3>
        ...
<input type="button" name="previous" class="previous action-button" value="Previous" data-current-block="3" data-next-block="2" />
        <button type="submit" name="donateNow" id="donateNow" class="submit action-button" value="Submit" >Submit</button>
    </fieldset>
</form>

Here 对我当前的代码进行了调整，以便与 parsley.js 一起使用。 （我目前遇到问题 #2）

我一生都无法弄清楚如何让验证在页面更改时起作用。感谢您提供的任何帮助！

Answer 1

您的代码有几个问题。关于您的 #2 问题，这是由于以下原因发生的：

//this comes from the custom easing plugin
easing: 'easeInOutBack'

您将其作为animate 的options 对象的一部分。根据您的评论，这来自一个自定义插件，您未将其包含在您的 jsfiddle 中。

如果您评论该行，它将按预期进行动画处理 (see updated jsfiddle)；

关于您的#1 问题：

1. 您的代码中没有包含 parsley.js
2. 您没有将 parsley 绑定到您的表单（您应该使用 $("#msform").parsley() 或属性 data-parsley-validate 执行此操作）
3. 当您单击 .next 或 .prev 时，您始终会显示下一个或上一个字段集，而不验证该字段集/块。
4. 您的 jsfiddle 与您发布的代码不匹配。在小提琴中，您没有 required 属性。

您应该看一下multisteps example，尤其是javascript部分，我在此处将其与其他cmets一起包括在内：

// The form tag is <form id="demo-form" data-parsley-validate>, so 
// parsley will automatically be bound to that form.
// see the docs http://parsleyjs.org/doc/index.html#psly-usage-form
<script type="text/javascript">
$(document).ready(function () {
  // when you click on next
  $('.next').on('click', function () {
    // save current and previous blocks (these are your fieldsets)
    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)
      // THIS IS THE IMPORTANT STEP. Validate the current block,
      // If the current block is not validated, the next block
      // won't be shown (note the return).
      if (false === $('#demo-form').parsley().validate('block' + current))
        return;

    // validation was ok. We can go on next step.
    $('.block' + current)
      .removeClass('show')
      .addClass('hidden');

    $('.block' + next)
      .removeClass('hidden')
      .addClass('show');

  });
});
</script>