Как ДОскролить до подсказки для незаполненного поля html5 формы?

Question

[camradee]

Есть форма html5 со множеством полей (в один экран не помещаются), некоторые поля required, главное меню зафиксировано, т.е. при прокрутке оно всегда остается сверху. Собственно проблема - при submit'е если какое-то поле незаполненно и обязательно, браузер прокручивает страницу до такого поля. Но поскольку менюшка закреплена и висит сверху, получается так что сообщение об ошибке - tooltip показывается над меню. Есть ли возможность как-то сказать бразуеру прокрутить чуть больше, а именно на ширину меню.


Серая часть это меню, если такая возможность есть, то хотелось бы сказать браузеру прокручивать с учетом ширины этого меню.

Answer 1

[ThunderCat]

что то похожее делал, даю как есть, ибо лень разбираться самому в вашем случае:

var offs = 0;
$('#mainform input, textarea').on('invalid',function(e){
        var fi = document.querySelectorAll(':invalid');
        if(fi.length){
            fi = fi[1];
            fi.focus();
            offs = $(fi).offset();
            return true;
        }
        return true;
    })

все это конечно в документ онлоад обернуть, ну и форму вашу прикрутить.

Comments

[camradee]

Нашел такое решение, вроде работает:

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