Question

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

1）在我点击提交之前不会提示未填写的字段，然后在我点击上一个或之后显示错误 2）当我点击Next时，我在控制台中收到一条错误，指出它是“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'

您将此作为options的{{1}}对象的一部分。根据你的评论，这来自一个自定义插件，你不包括在你的jsfiddle中。

如果您对该行进行评论，则会按预期进行动画处理（see updated jsfiddle）;

关于你的＃1问题：

您的代码中未包含parsley.js
您没有将欧芹绑定到您的表单（您应该使用animate或使用属性$("#msform").parsley()）
当您点击data-parsley-validate或.next时，您始终会显示下一个或上一个字段集，而不验证该字段集/块。
您的jsfiddle与您发布的代码不符。在小提琴中，您没有.prev属性。

你应该看一下multisteps example，特别是javascript部分，我在这里附带了附加评论：

required

使用parsley.js验证多页表单

1 个答案: