表单验证错误：相对跳转和粘性标题

Question

在我的一个页面上，我有一个网页表单和一个粘贴标题。

当用户尝试使用modern-ish browser提交此表单但尚未填写必填字段时，会显示错误气球（如预期的那样）。

问题是粘性标题，它隐藏了输入字段，如下所示（jsfiddle）：

现在，我的问题是：

当form.checkValidity()为false时，是否有一种明智的方法可以阻止此行为并向提交事件导致的相对页面跳转添加一些像素？

我添加了当前的实现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);
};

就我个人而言，我发现这并不像它可能的那么好，但它确实起到了作用。