Validieren Sie Formulareingabe auf keyup mit jQuery

Question

Ich versuche, mein Formular so zu erstellen, dass, wenn ein Benutzer eine Eingabe eingibt und die Eingabetaste drückt, erhalten sie das nächste Eingabefeld.

Ich habe diese Arbeit in Ordnung in der Tatsache, zeigt es das nächste div nur kann ich nicht die Validierung Arbeits bekommen ...

// Form on enter next div... 
 
$(window).load(function(){ 
 
$('footer .active input').on("keyup", function(e) { 
 
    e.preventDefault(); 
 
    
 
    if (e.keyCode === 13) { 
 
     if($('footer .active input').val().length === 0){ 
 
      alert('NO!'); 
 
     } else { 
 
      var $activeElement = $("footer .active"); 
 
      $("footer .active").next().addClass("active").removeClass('inactive'); 
 
      $activeElement.removeClass("active").addClass('inactive'); 
 
     } 
 
    } 
 
}); 
 
});

form { 
 
    overflow: hidden; 
 
    width:100%; min-height:200px; 
 
    position:relative; 
 
} 
 
div.inactive { 
 
    position: absolute; 
 
    display: none; 
 
    width:100%; 
 
    border-bottom:1px solid rgba(255,255,255,0.3); 
 
} 
 
input { 
 
    padding:2.5rem 0; 
 
    font-size:4rem; 
 
    font-weight:200; 
 
    width:80%; 
 
} 
 
.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<footer> 
 
    <form action=""> 
 
     <div class="input active"> 
 
      <input type="text" placeholder="Who are you?" /> 
 
     </div> 
 
     <div class="input inactive"> 
 
      <input type="text" placeholder="What is your Email?" /> 
 
     </div> 
 
     <div class="enter-btn"></div> 
 
    </form> 
 
</footer>

Answer 1

Sie $(document).on("keyup",'footer .active input', function(e) {}) verwenden

// Form on enter next div... 
 
$(document).on("keyup", 'footer .active input', function(e) { 
 
    if (e.keyCode == 13) { 
 
    if ($('footer .active input').val() == '') { 
 
     alert('NO!'); 
 
    } else { 
 
     var $activeElement = $("footer .active"); 
 
     $("footer .active").next().addClass("active"); 
 
     $activeElement.removeClass("active"); 
 
    } 
 
    } 
 
});

form { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    min-height: 200px; 
 
    position: relative; 
 
} 
 
form div.input { 
 
    position: absolute; 
 
    display: none; 
 
    width: 100%; 
 
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
 
} 
 
form div.input input { 
 
    padding: 2.5rem 0; 
 
    font-size: 4rem; 
 
    font-weight: 200; 
 
    width: 80%; 
 
} 
 
form div.input.active { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<footer> 
 
    <form action=""> 
 
    <div class="input active"> 
 
     <input type="text" placeholder="Who are you?" /> 
 
    </div> 
 
    <div class="input"> 
 
     <input type="text" placeholder="What is your Email?" /> 
 
    </div> 
 
    <div class="enter-btn"></div> 
 
    </form> 
 
</footer>

Answer 2

$('footer .active input').length ist die Anzahl der Elemente, die mit dem Selektor übereinstimmen. Wenn Sie die Eingabe des Wertes .val() erhalten möchten statt:

// Form on enter next div... 
$('footer .active input').on("keyup", function(e) { 
    if (e.keyCode == 13) { 
    if ($('footer .active input').val() == '') { 
     alert('NO!'); 
    } else { 
     var $activeElement = $("footer .active"); 
     $("footer .active").next().addClass("active"); 
     $activeElement.removeClass("active"); 
    } 
    } 
}); 

https://jsfiddle.net/g51xbfy6/2/

Answer 3

ändern Sie die Zeile:

if($('footer .active input').length === ''){ 

zu

if($('footer .active input').val() == ''){ 

und versuchen Sie es erneut.

Hinweis: Sie müssen den eingegebenen Wert überprüfen.

Updated Fiddle

Answer 4

verwenden "Länge === ''" nicht Länge gibt eine ganze Zahl, so dass Sie es nicht auf einen leeren String vergleichen (mit TypeOf string) versuchen

if($('footer .active input').val().length <= 0){ 

Answer 5

diese Codezeile direkt hier:

if($('footer .active input').length === '' 

Dieser Vergleich ist aus drei Gründen falsch:

1. Sie eine erwartete Anzahl Wert in einen String-Wert vergleicht eine mit strict comparison operator
2. Sie den Wert der Länge erwarten sollte 0, keine leere Zeichenfolge
3. Du vergleichst die Eigenschaft length von a zu sein jQuery-Objekt, das der Anzahl der DOM-Elemente entspricht, die mit Ihrem Selektor übereinstimmen.

Ändern Sie die Zeile dazu:

if($('footer .active input').val().length == 0) 

Oder diese, wenn Sie nicht die Länge überprüfen wollen:

if($('footer .active input').val() == '') 

Hinweis: möchten Sie vielleicht e.target verwenden anstatt das gleiche Element zweimal abzufragen.