Html5 Input Required Scroll To Input With Fixed Navbar On Submit

HTML5 input required, scroll to input with fixed navbar on submit

Tags: javascript , html , css Answers: 1 | Viewed 25,008 times



When trying to submit a form with missing required fields, my browser (Chrome), displays a message mentionning there is a field missing, and if it's out of my screen, it scrolls up to it.


My problem is that I have a 50px fixed header in my webpage, and as a result, the input field is hidden, and the message seems to come out of nowhere:


Input field hidden


Instead of


Input field shown


Is there a way around this?


I tried both applying the 50px margin to <html> and to <body>


Cheers




EDIT


Here's a fiddle of the problem: http://jsfiddle.net/LL5S6/1/


Some Answers For Html5 Input Required Scroll To Input With Fixed Navbar On Submit

#1. HTML5 input required, scroll to input with fixed navbar …


var delay = 0;
var offset = 150;
document.addEventListener('invalid', function(e){
$(e.target).addClass("invalid");
$('html, body').animate({scrollTop: $($(".invalid")[0]).offset().top - offset }, delay);
}, true);
document.addEventListener('change', function(e){
$(e.target).removeClass("invalid") }, true);

var elements = document.querySelectorAll('input,select,textarea');
var invalidListener = function(){ this.scrollIntoView(false);
};
for(var i = elements.length;
i--;)
elements[i].addEventListener('invalid', invalidListener);

html {
scroll-padding-top: 50px;
}

var form = $('#your-form') var navbar = $('#your-fixed-navbar')  // listen for `invalid` events on all form inputs form.find(':input').on('invalid', function (event) {
var input = $(this)
// the first invalid element in the form
var first = form.find(':invalid').first()
// only handle if this is the first invalid input
if (input[0] === first[0]) {
// height of the nav bar plus some padding
var navbarHeight = navbar.height() + 50

// the position to scroll to (accounting for the navbar)
var elementOffset = input.offset().top - navbarHeight

// the current scroll position (accounting for the navbar)
var pageOffset = window.pageYOffset - navbarHeight

// don't scroll if the element is already in view
if (elementOffset >
pageOffset &&
elementOffset <
pageOffset + window.innerHeight) { return true
}

// note: avoid using animate, as it prevents the validation message displaying correctly
$('html,body').scrollTop(elementOffset)
} })

var myelement = input.id;
var el = document.getElementById(myelement);
el.scrollIntoView(false);
var navhei = $('header').height();
var navheix = navhei + 30;
document.addEventListener('invalid', function(e){ $(e.target).addClass("invalid");
$('html, body').animate({scrollTop: $($(".invalid")[0]).offset().top - navheix }, 0);
setTimeout(function() { $('.invalid').removeClass('invalid');
},0300);
}, true);
body {
margin: 0;
margin-top: 50px;
text-align: center;
}
header {
position: fixed;
width: 100%;
height: 50px;
background-color: #CCCCCC;
text-align:center;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<header>This is the header</header>
<div>
<form action="">
<br>
<input id="text" type="text" required="required" /><br><br>
<input id="text" type="text" required="required" /><br><br><br><br>
<input id="text" type="text" required="required" /><br><br>
<input id="text" type="text" required="required" /><br><br><br><br>
<input id="text" type="text" required="required" /><br><br><br><br><br><br>
<input id="text" type="text" required="required" /><br><br>

<p>Click send (at the bottom of the page), without filling the input field.</p><br><br><br><br><br><br>

<input id="text" type="text" required="required" /><br><br>
<input type="submit" id="btnSubmit" />
</form>
</div>

<input type="text" required oninvalid="scroll_to_validator(this)">
<script>
function scroll_to_validator(input)
{
input.focus();

} </script>

body {  padding-top:50px;
}

 #content {
margin-top:50px;
}

$('input').on('invalid', function(e) {
setTimeout(function(){ $('html, body').animate({scrollTop: document.documentElement.scrollTop - 150 }, 0);
}, 0);
});

Please leave your answer here: