überprüfen, ob eine Eingabe leer ist (ein Formular validieren)

Question

Ich habe einen jQuery-Code, der in meiner Form aussehen sollte, wenn es eine leere Eingabe gibt. Wenn alle Eingaben leer sind, funktioniert mein Code, aber wenn ich einen Wert eingib, funktioniert es nicht mehr und es geht durch. Kannst du mir bitte helfen? Vielen Dank!

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

Es gibt mehrere Fehler im Code, aber das Hauptproblem ist hier:

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

Länge eine Zahl zurückgibt, und Sie versuchen, es zu einem vergleichen Zeichenfolge. Ich vermute, Sie meinen:

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

Oder

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

I Fremdelemente aus dem Code entfernt an einem hier MVCE

zu bekommen, ist eine funktionierende Demo Ihrer 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; 
} 

---

Kommentare über Ihren Code:

• Sie haben Ihren Eingängen eine Klasse zugewiesen. Sie sollten die Klasse in Ihrer JQuery verwenden, um Ihr Ereignis anstelle der ID jedes Eingangs zu binden.
• Sie scheinen nicht zu erkennen, dass jede Schleife eine Iteration über die Eingänge ist. Innerhalb jeder Klammer wird nur ein bestimmter Eingang überprüft. Und es ist am einfachsten, auf diesen Eingang als $(this) zu verweisen. Außerdem müssen Sie verfolgen, ob Sie leere Felder haben oder nicht. Ich habe dies mit einem booleschen isValid getan. Das boolean wird auf false gesetzt, wenn ein leeres Feld gefunden wird, und dann können Sie den Wert des Booleschen überprüfen, bevor die Warnung angezeigt wird.
• Wenn Sie nur Zahlen in einem Feld benötigen, sollten Sie dies dem Benutzer mitteilen. Entweder legen Sie ein Label auf die Seite, ändern Sie Ihre ungültige Nachricht in den Zustand , dass nur Zahlen erlaubt sind, ändern Sie die Eingabe, so dass alles außer eine Nummer sofort entfernt wird, wenn ich es eintippe, oder ... etwas. Ein Benutzer wird sich fragen, warum Sie ihre Eingabe von "11 lbs" entfernen und erklären, dass eine Eingabe erforderlich ist.
• console.log() ist dein Freund. Verwenden Sie es, um Ihren eigenen Code zu debuggen.