如何单击下一步按钮第一步检查验证和第二步不检查验证？

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(); 

其次，你不能有多个元素error为同一个ID，所以我就删除了。 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>