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

Question

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

当用户尝试使用现代浏览器提交此表单但未填写必填字段时，会显示一个错误气球（如预期的那样）。

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

现在，我的问题是：

有没有一种明智的方法来防止这种行为并在提交事件引起的相对页面跳转中添加一些像素，什么时候form.checkValidity()为假？

我已将我当前的实现添加为 answer。

（注意，您可能会争论粘性标题是否有益，但此讨论应在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);
};

就个人而言，我发现这并不像它可能的那样好，但它确实可以完成工作。