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

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) {})

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