jquery - jQuery each() を使用した入力要素のループ

Question

基本的に onsubmit イベントにハンドラーをアタッチするコードをいくつか書いていますが、修正方法がわからないバグがありますif。 t return ステートメントの後に停止すると、以下の ajax コードも実行されますが、理由がわかりません。

$('document').ready(function() {
  $('form').bind('submit', function(event) {

        event.preventDefault();
        $('form input').each(function() {
            if( !$(this).val()) {
                $(this).addClass('warning');
                return;
            }
        });


        $.ajax({
            url: 'http://example.com/',
            dataType: 'json',
            type: 'GET',

         });
  });
});

Answer 1

bind ブロックではなく each() ブロックを終了するように JavaScript に指示している場合。これを処理する 1 つの方法は、val() が空の場合、各ブロックでブール値を false に設定することです。各ブロックが完了したら、ブール値をチェックして、まだ true の場合はフォームを送信できます。以下のコード例を参照してください。

$('document').ready(function() {
  $('form').bind('submit', function(event) {
        var submit = true;
        event.preventDefault();
        $('form input').each(function() {
            if( !$(this).val()) {
                $(this).addClass('warning');
                // this is returning out of this block
                submit = false;
                return false;
            }
        });

        if (submit) {
            $.ajax({
                url: 'http://example.com/',
                dataType: 'json',
               type: 'GET',

            });
         }
  });
});

Answer 2

への呼び出しで作成した無名関数から戻っていますeach。代わりに、次のようにする必要があります。

$('document').ready(function() {
  $('form').bind('submit', function(event) {

        event.preventDefault();

        var has_empty = false;
        $('form input').each(function() {
            if( !$(this).val()) {
                $(this).addClass('warning');
                has_empty = true;
            }
        });

        if(has_empty){
            return;
        }

        $.ajax({
            url: 'http://example.com/',
            dataType: 'json',
            type: 'GET',

         });
  });
});

Answer 3

呼び出しで使用しているコールバック関数から戻っていますがeach、これはイベント ハンドラーから終了しません。

ステータスにフラグを立てる変数を設定します。

$('document').ready(function() {
  $('form').bind('submit', function(event) {

    event.preventDefault();
    var ok = true;
    $('form input').each(function() {
        if( !$(this).val()) {
            $(this).addClass('warning');
            ok = false;
        }
    });

    if (ok) {
      $.ajax({
        url: 'http://example.com/',
        dataType: 'json',
        type: 'GET',

      });
    }
  });
});