使用jQuery驗證keyup上的表單輸入

Question

我正在嘗試構建我的表單，以便當用戶填寫輸入並按下輸入時，他們將獲得下一個輸入字段。

我有這個工作正常它顯示下一個div只有我不能讓驗證工作...

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

你將不得不使用$(document).on("keyup",'footer .active input', function(e) {})

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

換行：

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

至

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

然后再試一次。

注意：您必須檢查輸入中輸入的值。

更新小提琴

Answer 3

不要使用“length ===''”length返回一個整數，因此你無法將它與一個空字符串（使用typeof string）進行比較試試

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

Answer 4

這行代碼就在這里：

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

這種比較錯誤有三個原因：

1. 您正在使用嚴格比較運算符將預期數值與字符串值進行比較
2. 您應該期望length的值為0 ，而不是空字符串
3. 您正在比較jQuery對象的屬性length ，該長度等於與您的選擇器匹配的DOM元素的數量。

將行更改為：

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

或者，如果您不想檢查長度：

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

注意：您可能希望使用e.target而不是兩次查詢相同的元素。

Answer 5

$('footer .active input').length是與選擇器匹配的元素數。 如果要獲取輸入值，請改用： .val() ：

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