1つの入力が空であるかどうかをチェックする（フォームを検証する）

Question

空の入力がある場合、フォームに表示されるはずのjQueryコードがあります。すべての入力が空の場合、私のコードは機能しますが、入力値を1つ入力すると、それ以上は機能しません。私を手伝ってくれますか？ありがとうございました！

jQuery(document).ready(function($) { 
 
$('#next').click(function() {//My next button 
 
    $('#age, #weight, #target_weight, #size').each(function() {//All field from my form 
 
     if ($(this).val().trim().length == '') {//If all fields are empty -> do... 
 
     $("html, body").animate({scrollTop: $('.progressbar-header').offset().top-100}, 250); 
 
     /*Here I want to show the error field on every empty element*/ 
 
    $(this).closest('.questions').find('.error').css("visibility","visible"); 
 
     $(this).css('border-color', "#ff0000"); 
 
\t \t \t \t 
 
    \t } else { 
 
     alert("All fields are filled!"); 
 
    
 
    //This will show the next hidden div and hide the last one 
 
    $('.active').removeClass('active').fadeIn().hide() 
 
     .next().show().addClass('active'); 
 
    
 

 
    return false; 
 
    } 
 
    }); 
 
}); 
 
});

<div class="field personal-informations-icon"> 
 
         <div class="questions-fcm-3 styled-radio"> 
 
          <span class="title">age</span> 
 
          <div class="questions"> 
 
           <input style="border-color: rgb(255, 0, 0);" id="age" class="personal-informations" pattern="[0-9]" name="age" placeholder="in Jahren" value="" min="1" aria-required="true" type="number"> 
 
           \t <div style="visibility: visible;" class="error age_error">This field is required!</div> 
 
          </div> 
 
         </div> 
 
         <div class="questions-fcm-3 styled-radio"> 
 
          <span class="title">weight</span> 
 
          <div class="questions"> 
 
           <input style="border-color: rgb(255, 0, 0);" id="weight" class="personal-informations" pattern="[0-9]" name="weight" placeholder="in KG" value="" min="1" aria-required="true" type="number"> 
 
           \t <div style="visibility: visible;" class="error weight_error">This field is required!</div> 
 
          </div> 
 
         </div> 
 
         <div class="questions-fcm-3 styled-radio"> 
 
          <span class="title">target weight</span> 
 
          <div class="questions"> 
 
           <input id="target_weight" class="personal-informations" pattern="[0-9]*" name="aim-weight" placeholder="in KG" value="" min="1" aria-required="true" type="number"> 
 
           \t <div class="error target_weight_error">This field is required!</div> 
 
          </div> 
 
         </div> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <div class="questions-fcm-3 styled-radio"> 
 
          <span class="title">Body Size</span> 
 
          <div class="questions"> 
 
           <input id="size" class="personal-informations" pattern="[0-9]*" name="size" placeholder="in cm" value="" min="1" aria-required="true" type="number"> 
 
           \t <div class="error size_error">This field is required!</div> 
 
          </div> 
 
         </div> 
 
        </div>

Answer 1

あり、あなたのコード内のいくつかのエラーがありますが、主な問題はここにある：

if ($(this).val().trim().length == '') 

長さは数を返し、あなたはそれを比較しようとしています文字列。私はあなたが意味を疑う ：

if ($(this).val().trim() === '') 

それとも

if ($(this).val().trim().length === 0) 

私はここでMVCE

で得るためにあなたのコードから余分な要素を取り除くには、あなたのMVCEの作業のデモです：JS Fiddle Demo

JQuery

あなたのコードについて

$('#next').click(function() { //My next button 
    var isValid = true; 
    $('.personal-informations').each(function(i, obj) { //All field from my form 
    if ($(this).val().trim() === '') { //If this field is empty -> do... 
     /*Here I want to show the error field on every empty element*/ 
     $(this).css("display", "block"); 
     $(this).css('border-color', "#ff0000"); 
     isValid = false; 
     console.log(isValid); 
    } 
    }); 
    if (isValid) { 
    alert("All fields are filled!"); 
    } 
}); 

HTML

<div class="field personal-informations-icon"> 
    <div class="questions-fcm-3 styled-radio"> 
    <span class="title">age</span> 
    <div class="questions"> 
     <input id="age" class="personal-informations" pattern="[0-9]" name="age" placeholder="in Jahren" value="" min="1" aria-required="true" type="number"> 
     <div class="error age_error">This field is required!</div> 
    </div> 
    </div> 
    <div class="questions-fcm-3 styled-radio"> 
    <span class="title">weight</span> 
    <div class="questions"> 
     <input id="weight" class="personal-informations" pattern="[0-9]" name="weight" placeholder="in KG" value="" min="1" aria-required="true" type="number"> 
     <div class="error weight_error">This field is required!</div> 
    </div> 
    </div> 
    <div class="questions-fcm-3 styled-radio"> 
    <span class="title">target weight</span> 
    <div class="questions"> 
     <input id="target_weight" class="personal-informations" pattern="[0-9]*" name="aim-weight" placeholder="in KG" value="" min="1" aria-required="true" type="number"> 
     <div class="error target_weight_error">This field is required!</div> 
    </div> 
    </div> 
    <div class="questions-fcm-3 styled-radio"> 
    <span class="title">Body Size</span> 
    <div class="questions"> 
     <input id="size" class="personal-informations" pattern="[0-9]*" name="size" placeholder="in cm" value="" min="1" aria-required="true" type="number"> 
     <div class="error size_error">This field is required!</div> 
    </div> 
    </div> 
</div> 

<input type="button" id="next" value="Next"> 

CSS

.error { 
    display: none; 
} 

---

その他のコメント：

• 入力に割り当てられたクラスがあります。あなたのJQueryでそのクラス を使用して、各入力のidではなくイベントをバインドする必要があります。
• 各ループが の入力を超える反復であることに気付いていないようです。各括弧の中には、特定の入力のみが検査されます。 そしてその入力を $(this)と呼ぶのが最も簡単です。また、空のフィールドがあるかどうかを追跡する必要があります。 私はisValidというブール値を使ってこれを行っています。空のフィールドに遭遇したときに ブール値がfalseに設定されている場合、 アラートを表示する前にブール値をチェックできます。
• フィールドに数字だけが必要な場合は、ユーザーに知らせる必要があります。 ラベルを横に置くか、無効なメッセージを番号に変更する に変更し、入力した番号が 以外のものになるように入力を変更します。 ユーザーは「11ポンド」の入力を取り除いている理由と、入力が必要であることを不思議に思います。
• console.log()はあなたの友人です。独自のコードをデバッグするために使用します。