jQueryでkeyupでフォーム入力を検証する

Question

ユーザーが入力を入力してEnterキーを押すと、次の入力フィールドが表示されるようにフォームを作成しようとしています。私は実際にこの作業大丈夫を持って

それはあなたが$(document).on("keyup",'footer .active input', function(e) {})を使用する必要があります

// 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

...次のdivは、私だけが検証作業を取得することはできません示してい

// 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は、セレクタに一致する要素の数です。変更

// 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

ライン：あなたの代わりに、入力の値を使用.val()を取得したい場合

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

へ

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

し、再試行してください。

注：入力に入力された値を確認する必要があります。あなたは（typeof演算文字列で）空の文字列にそれを比較することはできませんので

Updated Fiddle

Answer 4

は が

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

Answer 5

を試してみてください 長さがintergerを返す " '' ===長さ" を使用していません右ここにこのコード行：

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

この比較は三つの理由のために間違っている：

1. あなたが使用して文字列値に予想数値を比較しているstrict comparison operatorあなたは
2. は、あなたがのプロパティlengthを比較している0、ない空の文字列になるように長さの値を期待するべきである
jQueryオブジェクト。セレクタに一致するDOM要素の数に相当します。

変更し、これに行：

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

またはこの、あなたは長さをチェックしない場合：

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

注：あなたがe.targetを使用する場合があります同じ要素を2回クエリするのではなく、