僅驗證表單的可見部分

Question

我一直試圖讓這工作幾天，並且只是在圈子裏四處走動，不管我讀什麼資源。我想我的代碼中會有很多錯誤，但我無法弄清楚。 我有一個表格，我想分解成更小的部分，單擊下一個按鈕時，它將驗證該部分中的所有數據，然後隱藏它並顯示下一部分。根據個人是否有伴侶或孩子，我也有部分問題。我不知道如何處理，所以真的很感激一些技巧。

這裏是我的驗證功能，爲全面代碼jfiddle低於

$(".next").click(function() { 
$('#travelform').find(":visible").find("input[required]").each(function(){ 
    var myPattern = $(this).attr('pattern'); 
    var myPlaceholder = $(this).attr('placeholder'); 
    var isValid = $(this).val().search(myPattern) >= 0; 
    var isEmpty = true; 

    var abort = false; 
    $("div.error").remove(); 

    //traverse through each required field to ensure it's been filled in 
    $(':input[required]').each(function() { 
     if($(this).val()==='') { 
      $(this).after('<div class="error">This is a required field</div>'); 
      abort = true; 
     } 
    }); 
    if (abort) { return false;} else {return true;} 
}); 

}）;

小提琴：https://jsfiddle.net/gq4kyhs3/

Answer 1

你爲什麼不添加一個類都已經驗證輸入和有一個值，然後檢查這下按這樣每次：

$(".next").click(function() { 
$('#travelform').find(":visible").find("input[required]").each(function(){ 
    var myPattern = $(this).attr('pattern'); 
    var myPlaceholder = $(this).attr('placeholder'); 
    var isValid = $(this).val().search(myPattern) >= 0; 
    var isEmpty = true; 

    var abort = false; 
    $("div.error").remove(); 

    //traverse through each required field to ensure it's been filled in - Added this check in to see if it has already been checked...if not then continue... 

    if ($(this).hasClass('checked-and-filled') { 
     $(':input[required]').each(function() { 
      if($(this).val()==='') { 
       $(this).after('<div class="error">This is a required field</div>'); 
       abort = true; 
      } else { 

      // if the value is not empty then we know its been checked and it has a value 
      addClass('checked-and-filled'); 

      } 
     }); 
     if (abort) { return false;} else {return true;} 
    } 
}); 

也是關於您的HTML的快速評論。我注意到了這一點在你的小提琴，但我想你可能在你的實際代碼有這個錯誤...

上的所有部分的句子你開始一個h3標籤，但有h2結束：

<h3 class="center">Part 1 of 5</h2> 

希望這一切幫助:)