Атрибут required и изменение фокуса при ошибке заполнения поля. Как изменить положение?

Question

[Alexander Mischuk]

Как сделать так, чтобы после ошибки экран становился не к самому полю ввода, а на высоту лейбла с высотой шапки, например?
jsfiddle.net/Mischuk/DQZN3

Answer 1

[podvzbzdnul]

jsfiddle

//высота шапки 
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);