Question

我正在尝试构建我的表单，以便当用户填写输入并按Enter键时，它们会获得下一个输入字段。

我有这个工作正常它显示下一个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) {})

＆＃13;

// 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");
    }
  }
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

更改行：

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

到

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

再试一次。

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

Updated Fiddle

Answer 3

不要使用＆＃34;长度===＆＃39;＆＃39; ＆＃34; length返回一个整数，因此你不能将它与一个空字符串（使用typeof string）进行比较试试

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

Answer 4

这行代码就在这里：

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

这种比较错误有三个原因：

您正在使用strict comparison operator
您应该期望length的值为0，而不是空字符串
您正在比较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/

使用jQuery验证keyup上的表单输入

5 个答案: