Ошибка проверки формы: относительный прыжок и липкий заголовок

Question

На одной из моих страниц у меня есть веб-форма и липкий заголовок.

Когда пользователь пытается отправить эту форму с помощью modern-ish browser, но не заполнил необходимые поля, отображается воздушный шар с ошибкой (как и ожидалось).

Проблема заключается в том липкий заголовок, который скрывает поле ввода, как показано здесь (jsfiddle):

Теперь мой вопрос:

Есть ли разумный способ предотвратить это поведение и добавить некоторые пиксели к относительному переходу страницы, вызванному событием отправки, когда form.checkValidity() является ложным?

Я добавил свою текущую реализацию as answer.

(N.B. Вы можете утверждать, что липкий заголовок полезен вообще или нет, но это обсуждение должно приниматься по адресу UX).

Answer 1

Моя текущая реализация для оценки: http://jsfiddle.net/je8gttnj/

Суть его состоит в следующем код:

jQuery(document).on('click', 'form :submit', function(e) { 
    var form; 
    if ((form = jQuery(e.target).closest('form')).length !== 1) { 
    return; 
    } 
    if (!form[0].checkValidity || form[0].checkValidity()) { 
    return; 
    } 
    reposition(); 
}); 

где reposition() основном называет window.scrollBy(0, headerHeight):

var headerHeight; 
var reposition = function() { 
    headerHeight || (headerHeight = jQuery('.navbar-fixed-top').outerHeight() + 50); 
    setTimeout(function() { 
    window.scrollBy(0, -headerHeight); 
    }, 50); 
}; 

Лично я найти это не так хорошо, как могло бы быть, но выполняет работу.