無効なフィールドを持つjQueryのステップバイステップフォームをセットアップする方法

私は現在のものが完了するまで、次のフィールドをすべて無効にするステップバイステップフォームをセットアップしようとしています。次に、クラスを適用して完成したすべてのフィールドをマークします。私はフィールドを1つずつ正しい順序でアクティブにして、完了時にクラスを適用できるという点で半分のセットアップをしています。無効なフィールドを持つjQueryのステップバイステップフォームをセットアップする方法

フォームを追跡する必要があるときに私の問題が発生します。例えば、前のフィールドが再び空の値に戻された場合、次のフィールドはすべて無効にすべきである。これは、最初のフィールドを非アクティブ化し、次のフィールドを非アクティブ化すると、現時点でのみ発生しているようです。

また、最初のフィールドを無効にしてから再度値を適用すると、フォームに完了マークが付けられ、既存の完了フィールドにも次の未完フィールド実際には次のフィールドをもう一度変更して処理を続けることを私が待っています。

私は例を付けました。助けていただければ幸いです。

jQuery(function($) { 
 

 

 
     var currentStep = $('.tq-form-step'); 
 
     currentStep.addClass('tq-form-step--disabled'); 
 
     currentStep.first().removeClass('tq-form-step--disabled'); 
 
    
 
     $(currentStep).change(function() { 
 
     if ($('.tq-step-form--input').val() != '') { 
 
      $(this).addClass('tq-form-step--completed'); 
 
      $(this).next().removeClass('tq-form-step--disabled'); 
 

 
     } else { 
 
      $('.tq-form-step').removeClass('tq-form-step--completed'); 
 
      $('.tq-form-step').next().addClass('tq-form-step--disabled'); 
 
     } 
 

 
     }); 
 

 
     var fieldSet = $('.tq-form-fieldset__wrapper');  
 

 
     $(fieldSet).ready(function() { 
 
     if($('.tq-step-form--hidden')) { 
 
      $('.tq-step-form--hidden').parent('.tq-form-fieldset__wrapper').hide(); 
 
     } else if ($('.tq-step-form--hidden').prev('.tq-step-form--input').val() != '') { 
 
      console.log('text'); 
 
      $('.tq-step-form--hidden').parent('.tq-form-fieldset__wrapper').show(); 
 
     } 
 
     }); 
 
     
 
    });

.tq-icon-list__image { 
 
\t display: inline-block; 
 
\t background: rgba(238,238,238,1); 
 
\t -webkit-transition: background 0.5s, color 0.2s; 
 
\t -moz-transition: background 0.5s, color 0.2s; 
 
\t transition: background 0.5s, color 0.2s; 
 
\t border-radius: 50%; 
 
\t width: 77px; 
 
\t height: 77px; 
 
\t line-height: 77px; 
 
\t margin-bottom: 10px; 
 
} 
 

 

 

 
.tq-form-step select { 
 
\t width: 100%; 
 
\t box-shadow: none; 
 
\t position: relative; 
 
\t z-index: 1; 
 
\t border: 2px solid #6b1f99; 
 
\t box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3); 
 
} 
 

 
.tq-form-step--disabled { 
 
\t opacity: 0.5; 
 
\t pointer-events: none; 
 
} 
 

 
.tq-form-step__number-container { 
 
\t position: relative; 
 
} 
 

 
.tq-form-step__connecting-line { 
 
\t margin-right: 30px; \t 
 
\t padding-top: 28px; 
 
\t position: relative; 
 
\t z-index: 1; 
 
} 
 

 

 

 
.tq-form-step__form-fields { 
 
\t padding-bottom: 15px; 
 
} 
 

 
.tq-form-step:nth-last-child(2) .tq-form-step__connecting-line:after { 
 
\t border-right: 0; 
 
} 
 

 
.tq-form-step__number { \t 
 
\t width: 60px; 
 
\t height: 60px; 
 
\t color: #6b1f99; 
 
\t font-size: 1.5em; \t 
 
\t text-align: center; 
 
\t z-index: 2; \t 
 
\t border: 4px solid #6b1f99; \t 
 
\t border-radius: 50%; 
 
\t background-color: #f7f7f7; 
 
\t -webkit-transition : border 500ms ease-out; 
 
    -moz-transition : border 500ms ease-out; 
 
    -o-transition : border 500ms ease-in; 
 
    transition : border 500ms ease-out; 
 
    display: table; 
 
    z-index: 2; 
 
    position: relative; 
 
} 
 

 
.tq-step-form--hidden { 
 
\t display: block; 
 
} 
 

 
.tq-form-fieldset .tq-form-fieldset__wrapper { 
 
\t margin: 30px 0 0 30px; 
 
} 
 

 
.tq-form-fieldset .tq-form-fieldset__wrapper:first-child:before { 
 
\t display: none; 
 
} 
 

 
.tq-form-fieldset .tq-form-fieldset__wrapper:before { 
 
\t border-bottom: 2px dotted #b18ac7; 
 
\t border-left: 2px dotted #b18ac7; 
 
\t border-radius: 5px; 
 
\t z-index: 0; 
 
\t content: ""; 
 
\t position: absolute; 
 
\t font-size: 2em; 
 
\t height: 64px; 
 
\t width: 35px; 
 
\t left: 25px; 
 
\t margin-top: -32px; 
 
} 
 

 
.tq-form-fieldset .tq-form-fieldset__wrapper:first-child { 
 
\t margin: 0; 
 
} 
 

 
.tq-form-step__number span { 
 
\t display: table-cell; 
 
\t height: 100%; 
 
\t vertical-align: middle; 
 
} 
 

 
.tq-form-step--completed select, .tq-form-step--disabled select { 
 
\t border: 1px solid #bdbdbd; 
 
\t box-shadow: none; 
 
} 
 

 

 
.tq-form-step--completed .tq-form-step__number { 
 
\t border: 0; 
 
\t background-color: #b18ac7; 
 
\t border: 4px solid #b18ac7; 
 
\t color: #fff; 
 
} 
 

 
.tq-form-step.tq-form-step--completed label, .tq-form-step.tq-form-step--disabled label { 
 
\t font-size: 0.875em; 
 
\t font-weight: 200; 
 
} 
 

 
.tq-form-step--completed .tq-form-step__connecting-line:after { 
 
\t border-right: 3px solid #b18ac7; 
 
} 
 

 
.tq-form-step--disabled .tq-form-step__number { 
 
\t border: 4px solid #cccccc; \t 
 
\t color: #ccc; 
 
\t background-color: #f7f7f7; 
 
} 
 

 
.tq-form-step__submit { 
 
\t text-align: right; 
 
} 
 

 
.tq-form-step label { \t 
 
\t font-weight: 400; 
 
\t font-size: 1.125em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="tq-apply-now"> 
 

 
     <div class="row tq-form-step" id="step1"> 
 
      <div class="col-md-1 tq-equal-height-container tq-form-step__connecting-line"> 
 
       <div class="tq-form-step__number"><span>1</span></div> 
 
      </div> 
 
      <div class="col-md-8 tq-equal-height-container tq-form-step__form-fields"> 
 
       <label for="how-to-study">Choose</label><br> 
 
       <select class="tq-step-form--input"> 
 
        <option value="" selected>Choose</option> 
 
        <option value="Test">Test</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 

 
     <div class="row tq-form-step" id="step2"> 
 
      <div class="col-md-1 tq-equal-height-container tq-form-step__connecting-line"> 
 
       <div class="tq-form-step__number"><span>2</span></div> 
 
      </div> 
 
      <div class="col-md-8 tq-equal-height-container tq-form-step__form-fields"> 
 
       <label for="where-to-study">Choose</label><br> 
 
       <div class="tq-form-fieldset"> 
 
        <div class="tq-form-fieldset__wrapper"> 
 
        <select class="tq-step-form--input"> 
 
         <option value="" selected>Choose</option> 
 
         <option value="Here">Here</option> 
 
        </select> 
 
        </div> 
 
        <div class="tq-form-fieldset__wrapper"> 
 
        <select class="tq-step-form--hidden"> 
 
         <option value="" selected>Select</option> 
 
         <option value="Hills">Hills</option> 
 
        </select> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </div> 
 

 
     <div class="row tq-form-step" id="step3"> 
 
      <div class="col-md-1 tq-equal-height-container tq-form-step__connecting-line"> 
 
       <div class="tq-form-step__number"><span>3</span></div> 
 
      </div> 
 
      <div class="col-md-8 tq-equal-height-container tq-form-step__form-fields"> 
 
       <label for="workload">Choose</label><br> 
 
       <select class="tq-step-form--input"> 
 
        <option value="" selected>Choose</option> 
 
        <option value="Test">Test</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 

 
     <div class="row tq-form-step" id="step4"> 
 
      <div class="col-md-1 tq-equal-height-container tq-form-step__connecting-line"> 
 
       <div class="tq-form-step__number"><span>4</span></div> 
 
      </div> 
 
      <div class="col-md-8 tq-equal-height-container tq-form-step__form-fields"> 
 
       <label for="start-date">Choose</label><br> 
 
       <select class="tq-step-form--input"> 
 
        <option value="" selected>Choose</option> 
 
        <option value="27 January 2018">27 January 2018</option> 
 
       </select> 
 
      </div> 
 
     </div> 
 

 
     <div class="row tq-form-step" id="step5"> 
 
      <div class="col-md-1 tq-equal-height-container"> 
 
      </div> 
 
      <div class="col-md-8 tq-equal-height-container tq-form-step__form-fields"> 
 
       <div class="tq-form-step__submit"> 
 
       <input type="submit" value="Proceed with application" disabled class="tq-apply-now-step tq-button tq-button--red tq-step-form--input" id="tq-apply-now-step5"> 
 
       </div> 
 
      </div> 
 
     </div>     
 

 
     </form> 
 

 
     </div>

出典

2017-08-28 pedz

同じためplnkrを入力してください最適化することができ、このコードはまだ最適化されていない

$(currentStep).change(function() { /*if ($('.tq-step-form--input').val() != '') { $(this).addClass('tq-form-step--completed'); $(this).next().removeClass('tq-form-step--disabled'); } else { $('.tq-form-step').removeClass('tq-form-step--completed'); $('.tq-form-step').next().addClass('tq-form-step--disabled'); } */ //remove the code to fix the step 1 issue Sample(); //call it here });

で関数を呼び出すことができます。 – Swanand

説明に役立つスニペットを添付しました。 – pedz

私は、これはあなたが非常に

更新されたバージョンのコード上記 https://jsfiddle.net/0mchrm9m/1/

function Sample(){ 
    $('div[id^="step"]').each(function(i, v){ 
     var $this = $(this); 
     var $icon = $this.first('div'); 
     if ($icon.hasClass('tq-form-step--disabled')){ 
      //do whatever for disabled class 
     }else{ 
      $icon.nextAll('div').removeClass('tq-form-step--disabled'); //remove all the disabled class 1st 
      if ($icon.find('select').prop('selectedIndex') === 0){ //check if the 1st selection index is 0 
      $icon.removeClass('tq-form-step--completed'); //remove current class 
      $icon.nextAll('div').addClass('tq-form-step--disabled'); //add disabled to all class that can be found next 
      }else{ 
      $icon.addClass('tq-form-step--completed'); //else make it as completed 
      } 
     } 
     }); 
    }

を達成しようとするものであれば見て、jsfiddleを作成していました自己説明、理解できない場合は、私に知らせてください

は、あなたはそれが

出典

2017-08-28 07:19:07 Se0ng11

それは私が必要とするものに非常に近いです。唯一の問題は、最初の3つのフィールドのオプションを入力した後、最初のフィールドを選択解除してもう一度選択すると、完成したフィールドにtq-form-step-completedクラスを適用する必要があるということです。現時点では、終了フィールドにスキップしますが、完成したクラスは完了フィールドに適用されません。あなたが助けることができるどんなチャンスですか？ – pedz

手順1は発行権を持っていますか？ええ、ちょうどそれを見た、私はステップ1のコードの一部を微調整させてください – Se0ng11

は、更新されたバージョンを追加していた、見て – Se0ng11

無効なフィールドを持つjQueryのステップバイステップフォームをセットアップする方法

答えて

関連する問題