[次へ]ボタンをクリックする方法最初のステップの確認検証と2番目のステップ検証を確認しない？

Question

私は検証でカスタムウィザードを作成しますが、[次へ]ボタンをクリックして最初のステップを確認し、次のステップをクリックすると次のボタンをクリックします。以下に示すよう

HTMLは次のとおりです。以下は

<form> 
      <div class="form-main"> 
       <div class="form-input"> 
        <input type="text" id="fname" placeholder="First Name"> 
        <p id="error"></p> 
       </div> 
       <div class="form-input"> 
        <input type="text" id="lname" placeholder="Last Name"> 
        <p id="error"></p> 
       </div> 
       <div class="form-input"> 
        <input type="email" id="email" placeholder="Email"> 
        <p id="error"></p> 
       </div> 
       <div class="form-input"> 
        <input type="password" id="password" placeholder="Password"> 
        <p id="error"></p> 
       </div> 
       <div class="form-btn"> 
        <button type="button" id="prev" onClick="prevBtn(this);">prev</button> 
        <button type="button" id="next" onClick="nextBtn(this);">next</button> 
        <button type="submit" id="submit">submit</button> 
       </div> 
      </div>  
     </form> 

スクリプト：更新ステータスを使用 分離機能指標と更新、検証、次のボタンと前のボタンを見つけることを意味します。

$(window).on('load',function(){ 
    $('.form-main > .form-input:nth-child(1)').addClass('open'); 
    $('.form-main > .form-input:not(".open")').addClass('close').hide();  
}); 

var $div = $('.form-input'); 
var submits = $('#submit').css('display','none'); 
index = 0; 

function updateStatus(a){ 
    $div.eq(index).removeClass('current').addClass('close').hide(); 
    index += a; 

    $div.eq(index).addClass('current').removeClass('close').show(); 

    $('#next').toggle((index !==$div.length-1)); 
    $('#prev').toggle(index !== 0); 

    if(index == ($div.length - 1)){ 
     submits.toggle(index !== 0); 
    }else{ 
     submits.hide(); 
     } 
} 

var input = document.getElementsByTagName('input'); 
var error = document.getElementById('error'); 

function validation(){ 
    var inputValue = $(input).val(); 
    var inputType = $(input).attr('type'); 
     if(inputValue !== ''){ 
      updateStatus(+1); 
     }else{  
      error.innerHTML = "please enter the value"; 
     } 
} 

function nextBtn(){ 
    validation(); 
} 

function prevBtn(){ 
    updateStatus(-1); 
} 

Answer 1

私はいくつかの変更を加えて動作させました。以下に

var inputValue = $(input).val(); 

を変更

は、あなたが

var inputValue = $('input:visible').val(); 

を現在の目に見える要素をチェックする必要があるとして、第二に、あなたは複数の要素に同じIDとしてerrorを持つことができませんので、私はそれを削除しました。 IDはユニークです。

$(window).on('load', function() { 
 
    $('.form-main > .form-input:nth-child(1)').addClass('open'); 
 
    $('.form-main > .form-input:not(".open")').addClass('close').hide(); 
 
}); 
 

 
var $div = $('.form-input'); 
 
var submits = $('#submit').css('display', 'none'); 
 
index = 0; 
 

 
function updateStatus(a) { 
 
    $div.eq(index).removeClass('current').addClass('close').hide(); 
 
    index += a; 
 

 
    $div.eq(index).addClass('current').removeClass('close').show(); 
 

 
    $('#next').toggle((index !== $div.length - 1)); 
 
    $('#prev').toggle(index !== 0); 
 

 
    if (index == ($div.length - 1)) { 
 
    submits.toggle(index !== 0); 
 
    } else { 
 
    submits.hide(); 
 
    } 
 
} 
 

 
var input = document.getElementsByTagName('input'); 
 

 
function validation() { 
 
    var inputValue = $('input:visible').val(); 
 
    var inputType = $(input).attr('type'); 
 
    if (inputValue !== '') { 
 
    updateStatus(+1); 
 
    } else { 
 
    $('input:visible').next().html("please enter the value"); 
 
    } 
 
} 
 

 
function nextBtn() { 
 
    validation(); 
 
} 
 

 
function prevBtn() { 
 
    updateStatus(-1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <div class="form-main"> 
 
    <div class="form-input"> 
 
     <input type="text" id="fname" placeholder="First Name"> 
 
     <p></p> 
 
    </div> 
 
    <div class="form-input"> 
 
     <input type="text" id="lname" placeholder="Last Name"> 
 
     <p></p> 
 
    </div> 
 
    <div class="form-input"> 
 
     <input type="email" id="email" placeholder="Email"> 
 
     <p></p> 
 
    </div> 
 
    <div class="form-input"> 
 
     <input type="password" id="password" placeholder="Password"> 
 
     <p></p> 
 
    </div> 
 
    <div class="form-btn"> 
 
     <button type="button" id="prev" onClick="prevBtn(this);">prev</button> 
 
     <button type="button" id="next" onClick="nextBtn(this);">next</button> 
 
     <button type="submit" id="submit">submit</button> 
 
    </div> 
 
    </div> 
 
</form>