jQueryのerror-flag?について

Question

初めまして。初心者ですが宜しくお願い致します。
現在下記のようなお問い合わせフォームを作るコードを見ているのですが、
どうしても「error-flag」の存在の意味が分からないでいます。
このフラグが無くてもifとelseだけで文章としては成立しているような気が
するのですが、、このerror-flagがある事で文章にどのような意味が
出てくるのか、また最後のreturn falseの意味も教えて頂けましたら幸いです。
初歩的な質問ですみませんが、宜しくお願い致します。

 $('.contact-form form').submit(function(){
    var error_flag = false;
    $(this).children('input, textarea').each(function(){
      var body = $(this).val();
      if (!body) {
        $(this).prev('.error-message').text('入力してください');
        error_flag = true;
      } else {
        $(this).prev('.error-message').text('');
      }
    });

    if (!error_flag) {
      $('.contact-form').html('<h4>お問い合わせありがとうございます。</h4>');
    }
    return false;
  });
});
コード

Answer 1

まず、error_flag の件ですが、このコードでは、submit ボタンが押されたとき、そのフォーム内の input や textarea をひとつずつ調べ、値が空でないかチェックしています。each() の中で個々の入力値をチェックしているわけですね。
で、このループを抜けたあと、error_flag を見ていますが、これは先のループ内でひとつでも空のものがあれば true になっています。逆に言えば、すべての input・textarea にちゃんと入力がなされていたときにだけ false になります。

整理すると、if (!body) { のところで調べているのは個々の入力値、if (!error_falg) { のところで調べているのはフォーム全体として入力がちゃんとされていたか、ということです。

次に return false; についてです。イベントハンドラの中で false を返すと、デフォルトのイベントをキャンセルし、それ以上のイベントの伝搬をさせません。簡単に言えば、ここで return false; しないと submit のデフォルトの動作、すなわち、フォームの送信が行なわれますが、return false; していることによりフォーム送信は行われません。

Comments

[kenj]

丁寧なご回答ありがとうございました。
部分ごとの分かり易いご説明のおかげでフラグの意味も分かりました。
ありがとうございます。