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/ にあります。

jqueryjquery-validatescrollto
47
Heraldmonkey

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

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

  • コールバック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
sathyakrishnapalani