Modify autoscroll required attribute HTML

Question

The input field is getting hidden by the fixed header when the input is invalid.

Is it possible to modify or disable the autoscrolling of the input required attribute ?

<!DOCTYPE html>
<html>
<body>
<style>        
    body {
      margin: 0;
    }

    header {
      width: 100%;
      height: 50px;
      position: fixed;
      color: red;
      background: #b2b2b2;
      opacity: 0.6;
    }

    form {
      padding-top: 65px;
    }
</style>

<header>Input Testing</header>

<form action="demo_form.asp">
  Username: <input type="text" name="usrname" required>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<input type="submit">

</form>
</body>
</html>

https://jsfiddle.net/0z56f24f/

The best solution would be adding a margin of the header height to the scrolling position to display it correctly.

Possible duplicate of [HTML5 input required, scroll to input with fixed navbar on submit](http://stackoverflow.com/questions/19814673/html5-input-required-scroll-to-input-with-fixed-navbar-on-submit) — pdunker, Sep 02 '16 at 10:34

score 2 · Accepted Answer · edited May 23 '17 at 12:32

Finally found a solution on SO:

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

var delay = 0;
var offset = 125;

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

https://jsfiddle.net/0z56f24f/2/

Abhishek Pandey · Answer 2 · 2016-08-30T08:34:43.007

You can use js to scroll top,

$('#commentForm').click(function(){
 if (!$('input[required]').val()) $('body').scrollTop(0);
});

body {
  margin: 0;
}

header {
  width:100%;
  height: 50px;
  position: fixed;
  color: red;
  background: white;
  opacity: 0.7;
}

form {
  padding-top: 65px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header>INPUT TESTING</header>
<form action="demo_form.asp">
  Username: <input type="text" name="usrname" required>
<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<p><strong>Note:</strong> The required attribute of the input tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

<input type="submit" id="commentForm">
</form>

You forgot to add jquery lib, updated your fiddle, check once. https://jsfiddle.net/cfrebyfL/2/ — Abhishek Pandey, Aug 30 '16 at 08:49
Tried in different browsers. Working in Chrome, Opera & Safari. Not working in Firefox. :I — pdunker, Aug 30 '16 at 09:10

Modify autoscroll required attribute HTML

2 Answers2