Question

我正在尝试实现多步形式，其中下一步仅在当前有效时显示。

我试图点击下一个按钮触发验证脚本。我的功能如下：

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>

也许有人对我有所暗示。

Answer 1

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

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

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

Parsley多步形式 - 点击下一步验证

1 个答案: