I've been working on a form where the user can fill in an input and press enter to move to the next field.
Although I have managed to get the functionality to show the next div, I am facing issues with validation...
// Moving to next div on Enter key...
$(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>