使用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>

答

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

这不是问题@Carsten - 我有它的工作，因为它在移动到下一个div，我只是想验证输入已被填充之前，允许功能运行 – Liam

抱歉忘了添加该部分也改变了它 –

Oooh我看到了，感谢您花时间回复 - 完美的作品！ – Liam

答

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

答

更改行：

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

到

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

，然后再试一次。

注意：您必须检查输入中输入的值。

Updated Fiddle

哈，那简单！谢谢 – Liam

答

不使用 “长=== ''” 长度返回一个整数，所以你不能把它（用typeof字符串）比较空字符串尝试

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

答

这行代码就在这里：

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而不是查询相同的元素两次。

使用jQuery验证表单输入与使用jQuery的键入输入

相关推荐