フォームの目に見える部分のみを確認する

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> 

これがすべて役立つことを願って:)