2

私のフォームでは、required空にできないすべての要素にという名前のクラスを追加しました。次に、これらすべての要素に 2px の赤い境界線を適用する$.each()という名前のクラスを使用および追加して、各要素をループしています。border

var req = $('.required');
$.each(req, function(){
    var curr_val = $(this).val();
    if(! curr_val)
    {
      $(this).addClass('border');
    }
});

ページに垂直スクロールがあるため、送信がクリックされたときに、ページを最初の空の要素までスクロールして、ユーザーが何かが間違っていることを認識し、それがフォームが送信されなかった理由であることを確認したい

私が試したこと

以前のバージョンのコードにこのブロックを追加しました

$.each(req, function(){
    var curr_val = $(this).val();
    if(! curr_val)
    {
      $(this).addClass('border');
      $('html, body').animate({            // added for scrolling purposes
         scrollTop: $(this).offset().top
      }, 200);
    }
});

これは機能しますが、最後の空の要素に到達するまで 0.2 秒間隔でスクロールし続けるという問題があります。これは非常に面白く、ユーザーにとって望ましくないように見えます。

そのため、最初の空の要素までスクロールして、その下に空の要素がさらにある場合でもそこで停止する方法があるかどうか疑問に思っていました。それが入力され、送信が再度クリックされたら、最初の空の要素までスクロールして、そこで停止します。

JSフィドル

ここに JS Fiddle があります。これは、私が言及している面白い動作についてのアイデアを提供するためのものです。最後の要素に到達するまでスクロールし続けることに注意してください。

JSデモ

4

3 に答える 3

3

空のフィールドが検出されるたびに false を返すことで、$.each から抜け出すことができます。

$("#submit").on('click',function(){
    var req = $('.required');
    $.each(req, function(e){
        var curr_val = $(this).val();
        if(! curr_val)
        {
          $(this).addClass('border');
          $('html, body').animate({            // added for scrolling purposes
            scrollTop: $(this).offset().top
          }, 200);
            return false;
        }
   });
});​

お役に立てれば..

于 2012-12-13T08:25:42.157 に答える
1

要素ごとにアニメーションを実行します。ソリューションは、初回のみ実行する条件を追加するのと同じくらい簡単です。

var firstTime = true;
$.each(req, function(){
    var curr_val = $(this).val();
    if(! curr_val)
    {
      $(this).addClass('border');
      if(firstTime === true)
      {
          $('html, body').animate({            // added for scrolling purposes
             scrollTop: $(this).offset().top
          }, 200);
          firstTime = false;
      }
    }
});

これがあなたのフィドルが更新されたものです。

于 2012-12-13T08:23:39.953 に答える
1

最初のフラグである場合は、フラグを追加してマークすることができます。ここでは、アイデアを示します。

$(function(){
    var req = $('.required');
    var find = false;

    $.each(req, function(e){
        var curr_val = $(this).val();

        if(! curr_val)
        {
            $(this).addClass('border');

            if(!find){
                $('html, body').animate({            // added for scrolling purposes
                    scrollTop: $(this).offset().top
                }, 200);

                find=true;
            }
        }
   });
});​

修正フィドル

于 2012-12-13T08:28:45.960 に答える