香菜多步的形式 - 驗證上點擊下一步

我想實現一個多形式，其中在當前是有效的，下一步纔會顯示。香菜多步的形式 - 驗證上點擊下一步

我試圖觸發點擊下一步按鈕驗證腳本。我的功能看起來是這樣的：

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>

也許有人有一個提示我。

來源

2017-07-13 dgorges

可以顯示的application.js，其中調用函數createNextButton的一部分？ – tookie009

如果您使用的是單一形式的所有步驟，那麼你需要做的是建立驗證組，一組爲每一個步驟，並驗證您目前在該組。

data-parsley-group：將組分配給特定組驗證的字段。例如：data-parsley-group =「註冊」。這樣，您只能驗證表單的一部分而不是所有的字段。可以是多個。例如：數據香菜基團= '[ 「foo」的，「酒吧」]'

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

來源

2017-07-20 21:37:54 CrazyMerlin

香菜多步的形式 - 驗證上點擊下一步

回答

相關問題