Form Validation error: relative jump and sticky header

Question

在我的一个页面上，我有一个 Web 表单和一个便签 header。

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

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

现在，我的问题是：

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

我已经添加了当前的实现。

(N.B。您可能会争论粘性 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);
};

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

Form Validation error: relative jump and sticky header

Form Validation error: relative jump and sticky header

javascript

html

validation

page-jump