使用jQuery驗證表單輸入與使用jQuery的鍵入輸入

我試圖構建我的表單，以便當用戶填寫輸入並按下輸入時，他們將獲得下一個輸入字段。使用jQuery驗證表單輸入與使用jQuery的鍵入輸入

我有這方面的工作在實際上還行吧顯示，未來股利只有我無法得到驗證工作......

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

來源

2017-02-24 Liam

你將不得不使用$(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>

來源

2017-02-24 11:42:01

這不是問題@Carsten - 我有它的工作，因爲它在移動到下一個div，我只是想驗證輸入已被填充之前，允許功能運行 – Liam

抱歉忘了添加該部分也改變了它 –

Oooh我看到了，感謝您花時間回覆 - 完美的作品！ – Liam

-2

$('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/

來源

2017-02-24 11:43:00 AVAVT

更改行：

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

到

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

，然後再試一次。

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

Updated Fiddle

來源

2017-02-24 11:43:17

哈，那簡單！謝謝 – Liam

不使用「長=== ''」長度返回一個整數，所以你不能把它（用typeof字符串）比較空字符串嘗試

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

來源

2017-02-24 11:44:39 goosmaster

這行代碼就在這裏：

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

這種比較是錯誤的，原因有三：

您使用的是預期數量值與一個字符串值strict comparison operator
你應該期望長度的值是0，而不是一個空字符串
你要比較的屬性length jQuery對象，相當於與選擇器匹配的DOM元素的數量。

更改行這樣的：

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

或者這一點，如果你不想檢查長度：

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

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

來源

2017-02-24 11:52:54 valtari

使用jQuery驗證表單輸入與使用jQuery的鍵入輸入

回答

相關問題