web-dev-qa-db-ja.com

フォームが検証されると、ジャンプする代わりに最初のエラーにスクロールする方法は?

私はこのテーマのバリエーションで多くの質問を見てきましたが、簡単な解決策を探しています:

HTMLフォーム、jQuery検証、複数のフィールドが必要です。フォームが送信されると、検証は最初のエラーにジャンプして強調表示します。使いやすさを向上させるために、その最初のエラーフィールドまでスクロールします。しかし、検証を完全に爆破し続けるか、scrollToエラーをスローします。

標準の検証プラグイン(http://docs.jquery.com/Plugins/Validation)を使用する必要がありますが、scrollTo(http://flesler.blogspot.com/2007/ 10/jqueryscrollto.html)。

サンプルコードは http://jsfiddle.net/DtgKQ/1/ にあります。

47
Heraldmonkey

できることは次のとおりです。

  • デフォルトでは、検証プラグインは最初のエラー要素に焦点を合わせます(ある場合)。オプションfocusInvalidfalseに設定してオフにします。

  • コールバックinvalidHandlerハンドラーは、フォームが無効なときに実行されます。 2番目のパラメーターvalidatorを介して、バリデーターオブジェクト、つまりerrorList配列にアクセスできます。次に、最初のエラー要素に相対的にスクロールをアニメーション化できます。

コードは次のとおりです。

$("#commentForm").validate({
    focusInvalid: false,
    invalidHandler: function(form, validator) {

        if (!validator.numberOfInvalids())
            return;

        $('html, body').animate({
            scrollTop: $(validator.errorList[0].element).offset().top
        }, 2000);

    }
});

[〜#〜] demo [〜#〜]

115
Didier Ghys

私はすべてのjQuery拡張が好きではないので、この問題に対する私の解決策は次のとおりです:

if ($('#MYID').valid()) {
      //dosomething();
} else {
    $('html, body').animate({
         scrollTop: ($('.error').offset().top - 300)
    }, 2000);
}
10
Thomas

テーマjavascriptにこのコードを追加するだけです:

(function($) {
$(document).ready(function(){
    //bmo scroll to not valid
    $(".wpcf7").on('invalid.wpcf7',function(e){
        $('html, body').animate({
                scrollTop: $(".wpcf7-not-valid").first().offset().top-30
            }, 2000);
    });

});
})(jQuery);
7
user3629980

たぶん、どの入力が失敗したかを確認し、その位置(トップ)を取得し、jQueryの scrollTop を使用できます

$(window).scrollTop(errorPosition)

各エラーフィールドを取得することは、(少なくとも私にとって)非常に簡単ではないようです。

検証プラグインのドキュメントerrorPlacementを検索します。各エラーフィールドを取得する方法の例があります。

1
Tx3
  $("#create-form").validate({ // Set Focus on first invalid input
    focusInvalid: false,
    invalidHandler: function() {
      $(this).find(":input.error:first").focus();
      }
  });
0