javascript - 表单验证错误 : relative jump and sticky header

Question

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

当用户尝试使用 modern-ish browser 提交此表单时但未填写必填字段，将显示一个错误气球(如预期)。

问题是粘性 header ，它隐藏了输入字段，如下所示 (jsfiddle):

现在，我的问题是:

当 form.checkValidity() 为 false 时，是否有一种明智的方法来防止这种行为并向提交事件引起的相关页面跳转添加一些像素？

我添加了我当前的实现 as answer .

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

就我个人而言，我觉得这并没有想象中的那么好，但确实可以。