JSFiddle - React, Tailwind, and code Playground

by cheack

HTML

<header></header>
<form action="" method="post">
    <div>
        <label for="">Label</label>
        <input type="text" required />
    </div>
    <div>
        <label for="">Label</label>
        <input type="text" required />
    </div>
    <div>
        <label for="">Label</label>
        <input type="text" required />
    </div>
    <div>
        <label for="">Label</label>
        <input type="text" required />
    </div>
    <div>
        <label for="">Label</label>
        <input type="text" required />
    </div>
    <div>
        <label for="">Label</label>
        <input type="text" required />
    </div>
    <div>
        <label for="">Label</label>
        <input type="text" required />
    </div>
    <div>
        <label for="">Label</label>
        <input type="text" required />
    </div>
    <div>
        <label for="">Label</label>
        <input type="text" required />
    </div>
    <div>
        <label for="">Label</label>
        <input type="text" required />
    </div>
    <div>
        <input type="submit" />
    </div>
</form>

CSS

form {
    margin-top:150px
}
header {
    position:fixed;
    top:0;
    width:100%;
    height:50px;
    background:rgb(0, 0, 0);
}
div>label {
    display:block;
    margin-bottom: 10px;
}

JavaScript

//высота шапки 
var head_height = 50;

//ждем проверку на инвалидность
document.addEventListener('invalid', (function(){
    //флаг только для первого сообщения о неверных данных
    var is_first = true;
    return function(e){
        if(is_first){
            is_first = false;
            
            setTimeout(function(){
                //сбрасываем is_first чтобы еще раз можно было отправить пустые данные
                is_first = true;
                //верх лейбла инпута на странице экрана
                var etop = $(e.target).prev("label").offset().top;
                //верх лейбла относительно видимой части страницы
                var top = etop - $(window).scrollTop();

                //если верхушка скрывается за экраном и шапкой, 
                //то скролим к лейблу
                if (top < head_height) {
                    window.scrollTo(0, etop - head_height);
                }
            }, 9);
        }
    };
})(), true);