Parsley 多步表单 - 单击下一步验证

Posted 2023-05-09

【中文标题】Parsley 多步表单 - 单击下一步验证

【英文标题】：Parsley multistep form - validate on click next step

【发布时间】：2017-12-17 20:38:13

【问题描述】：

我正在尝试实现一个多步骤表单，其中仅在当前有效时才显示下一步。

我试图在单击下一步按钮时触发验证脚本。我的函数如下所示：

function createNextButton($form, options) 
    return $('<a />')
        .prop('href', '#')
        .addClass('application__btn application__btnNext')
        .html('>')
        .click(function(e) 
            e.preventDefault();
            var curIndex = $('.application--stateVisible').attr('data-tab');
            if ($('.applicationJS__validate').parsley().validate(group: 'block-' + curIndex)) 
                showNextTab($form, options);
            

        );

我的 HTML 表单如下所示：

<form data-parsley-validate="data-parsley-validate" enctype="multipart/form-data" name="field" class="application applicationJS__validate" action="/" method="post" novalidate="">
<fieldset data-tab="1" class="applicationJS__fieldset _9 1 _application--stateVisible" style="display: block;">
    <legend class="_legend _application__legend">Persönliche Daten</legend>
    <div class="row">
        <div class="col-xs-12 col-md-12 ">
            <div class="_field">
                <input data-parsley-required="true" data-parsley-required-message="Dieses Feld muss ausgefüllt werden!" data-parsley-trigger="change" placeholder="Straße/Hausnr.*" class="_input  " id="_field_1" type="text" name="tx__pi1[field][]" value="" data-parsley-group="block-1">
            </div>
        </div>
    </div>
    <div class="_fieldwrap _tab_navigation">
        <a href="#" class="application__btn application__btnNext">&gt;</a>
    </div>
</fieldset>
<fieldset data-tab="2" class="applicationJS__fieldset _11 2" style="display: none;">
    <legend class="_legend _application__legend">Organisatorisches</legend>
    <div class="row">
        <div class="col-xs-12">
            <div class="_field">
                <select data-parsley-required="true" data-parsley-required-message="Dieses Feld muss ausgefüllt werden!" data-parsley-trigger="change" class="_select  " id="_field_2" name="tx__pi1[field][]" data-parsley-group="block-2">
                    <option value="">Üben Sie eine Nebenbeschäftigung aus?</option>
                    <option value="Nein">Nein</option>
                    <option value="Ja">Ja</option>
                </select>
            </div>
        </div>
    </div>
    <div class="_fieldwrap _tab_navigation">
        <a href="#" class="application__btn application__btnPrev">&lt;</a>
        <a href="#" class="application__btn application__btnNext">&gt;</a>
    </div>
</fieldset>

我在页脚中包含我的 js。 application.js 包含带有 createNextButton() 的函数：

<script src="jquery.js" type="text/javascript"></script>
<script src="application/parsley.js" type="text/javascript"></script>
<script src="application/application.js" type="text/javascript"></script>

也许有人对我有提示。

【问题讨论】：

能否展示application.js中调用createNextButton函数的部分？

【参考方案1】：

如果您对所有步骤都使用一个表单，那么您需要做的是创建验证组，每个步骤一个，然后验证您当前所在的组。

data-parsley-group：将组分配给字段以进行特定组验证。例如：data-parsley-group="signup"。这样，您只能验证表单的一部分，而不是所有字段。可以是多个。例如：data-parsley-group='["foo", "bar"]'

http://parsleyjs.org/doc/index.html#usage-field