Parsley.js 不适用于多页表单，使用 data-parsley-group

Question

我在尝试使用 Parsley 验证多页表单时遇到问题。我的客户正在使用一个多页 jquery 插件，该插件检索表单中的所有字段集，并逐步显示每个字段集中的问题。它还有一个我可以自定义的内置验证功能，每次用户单击按钮进入下一步时都会调用它。

我已将我的复选框与 data-parsley-group='fieldset1' 以及在下一页上的 data-parsley-group='fieldset2' 等组合在一起。然后，在内置验证功能中我的多页插件，我打电话：

jQuery.fn.validatePage = function(page) {
    return $(this).parsley().validate('fieldset' + page);
}

（page 是一个增量器，从 1 开始）。如果 jQuery.fn.validatePage 返回 true，则多页 jquery 插件会增加 page 并继续显示下一步。

Parsley 验证在第一页上完全按照预期工作。但是，一旦验证从第 1 页返回 true，然后显示第二页，则 parsley validate 始终返回 true，即使必填字段为空。就好像我需要“重置”欧芹验证，但由于我正在验证特定的数据欧芹组，所以这不是必需的。这是 HTML 标记（请耐心等待代码，尝试对其进行一些清理，但现在它是通过我们的 CMS 动态创建的：

<form id="survey-form" method="post" data-parsley-validate="data-parsley-validate" data-parsley-errors-container="#survey-form .error-container" class="js_multipage-form">
<div class="error-container"></div>
<fieldset>
    <div class="title section">
        Question 1
    </div>
    <div class="checkbox section">
        <input type="checkbox" name="selectiongroup" value="Item 1" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset1" class="form_field form_field_checkbox"/>&nbsp;Item 1
        <input type="checkbox" name="selectiongroup" value="Item 2" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset1" class="form_field form_field_checkbox"/>&nbsp;Item 2
        <input type="checkbox" name="selectiongroup" value="Item 3" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset1" class="form_field form_field_checkbox"/>&nbsp;Item 3
        <input type="checkbox" name="selectiongroup" value="Item 4" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset1" class="form_field form_field_checkbox"/>&nbsp;Item 4
        <input type="checkbox" name="selectiongroup" value="Item 5" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset1" class="form_field form_field_checkbox"/>&nbsp;Item 5
    </div>
</fieldset>


<fieldset>
    <div class="title section">
        Question 2
    </div>
    <div class="checkbox section">
        <input type="checkbox" name="selectiongroup" value="Item 1" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset2" class="form_field form_field_checkbox"/>&nbsp;Item 1
        <input type="checkbox" name="selectiongroup" value="Item 2" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset2" class="form_field form_field_checkbox"/>&nbsp;Item 2
        <input type="checkbox" name="selectiongroup" value="Item 3" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset2" class="form_field form_field_checkbox"/>&nbsp;Item 3
        <input type="checkbox" name="selectiongroup" value="Item 4" data-parsley-required="true" data-parsley-mincheck="1" data-parsley-trigger="ifChanged" data-parsley-group="fieldset2" class="form_field form_field_checkbox"/>&nbsp;Item 4
    </div>
</fieldset>
</form>

我已经尝试了几个小时以使其按预期工作，但无济于事。还有其他值得研究的技术吗？我看到 Parsley 1.0 有一个不同的多页解决方案，它没有对 :hidden 元素运行验证。我尝试使用排除选项来隐藏这些，但这也不适用于这个多页插件。

任何建议将不胜感激。抱歉，如果这段代码太冗长，我尝试包含所有可能相关的代码。

Answer 1

您需要在验证功能中添加一个 json 对象

jQuery.fn.validatePage = function(page) {
    return $(this).parsley().validate({group:'fieldset' + page});
}

参见http://parsleyjs.org/doc/examples/multisteps.html的示例