2

私のページの 1 つに、Web フォームと固定ヘッダーがあります。

ユーザーが最新のブラウザーを使用してこのフォームを送信しようとしたが、必須フィールドに入力していない場合、(予想どおり) エラー バルーンが表示されます。

問題は、ここに示すように、入力フィールドを非表示にするスティッキー ヘッダーです ( jsfiddle )。

固定ヘッダーを指すフォーム検証エラー

さて、私の質問は次のとおりです。

form.checkValidity()が falseの場合、この動作を防止し、サブミット イベントによって発生する相対的なページ ジャンプにピクセルを追加する賢明な方法はありますか?

現在の実装を answer として追加しました。

(注意: スティッキー ヘッダーがまったく有益かどうかについて議論することはできますが、この議論はUXで行う必要があります)。

4

1 に答える 1

4

評価のための私の現在の実装: 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);
};

個人的に、私はこれができるほど良くないと思いますが、仕事はします.

于 2015-01-19T12:16:51.143 に答える