フォーム入力で使うjqueryの解説をして頂けないでしょうか？

Question

          <div class="contact-form">
            <h4>メッセージを送る</h4>
            <form>
              <div class="error-message"></div>
              <input type="text" name="email" placeholder="Email" class="contact-email">
              <div class="error-message"></div>
              <input type="text" name="subject" placeholder="Subject" class="contact-subject">
              <div class="error-message"></div>
              <textarea name="message" placeholder="Message"></textarea>
              <button type="submit" class="btn btn-contact">Submit</button>
            </form>
          </div>

jquery

  $('.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;
  });

上のhtmlは何を表すか分かるのですが、下のjqueryで何が起こっているのか全く分かりません

詳しい方いらっしゃいましたらお手数なのですが１行１行何を意味しているのかご解説願えないでしょうか？

宜しくお願い致しますm(__)m

Answer 1

1行ずつ見ていきましょう

  $('.contact-form form').submit(function(){

contact-formクラスの要素の下のformがsubmit（送信）されたら

    var error_flag = false;

error_flagという変数を宣言してfalseを代入する

    $(this).children('input, textarea').each(function(){

ここでの$(this)は$('.contact-form form')のこと
その下にあるinputとtextareaをまとめて取得し、eachで一つずつ処理をする

      var body = $(this).val();

ここでの$(this)は$(this).children('input, textarea')の一つ
bodyという変数を宣言して、$(this).val();を代入する。
具体的にはhtml内のemailやsubject, messageに入力されてる内容

      if (!body) {
        $(this).prev('.error-message').text('入力してください');
        error_flag = true;
      } else {
        $(this).prev('.error-message').text('');
      }

bodyに何も入っていなければ、その上にあって一番近いerror-messageクラスのdivのtextを入力してくださいに変更して、error-flagをtrueにする。
入力されていたら、error-messageのtextを空にする。

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

error-flagがfalseだったら（全てのinput,textareaに入力があったら）contact-formクラスの中身を<h4>お問い合わせありがとうございます。</h4>に変更する。
これによって、入力項目は全て消えて、お問い合わせありがとうございますだけが残る。
falseを返す。

こんな感じの動きです。

---

追記
回答1,3,4
「一つもエラーが無ければ」という条件のために必要です。
下でif(!error_flag)という条件でお問い合わせありがとうございますと表示するとしています。
これはerror_flagを反転させたものがtrueならばという意味です。
すなわちerror_flagがfalseならばという条件です。
error_flagがeachの中で書き換えられなければ、お問い合わせありがとうございますに書き換えなさいという風になります。

if(!body)の意味ですが、ifの括弧の中身はtrueかfalseで判定されます。
http://qiita.com/phi/items/723aa59851b0716a87e3
ここを見ると"hoge"はtrue、""はfalseと書いてあります。
bodyはinputやtextareaの内容ですので、何も入力されていないとfalseになり、それを反転させているので、if(!body)はbodyに何も入っていなければ実行されます。
eachの中でbodyが一回でも空だった場合、error_flagはtrueになります。
error_flagがfalseのままであるには、bodyには全部何かが入っている（フォームに全て入力されている）という条件が必要になります。
それが満たされるとき、お問い合わせありがとうございますに書き換えなさいという風になります。

回答2
その通りです。

Comments

[tanakashouzoux]

コメントありがとうございます！

あなたは神ですか？！

理解が深まりました！ありがとうございますm(__)m

再質問させてください

質問①

「 var error_flag = false;」はなぜ必要なんでしょうか？？なんかいらないような気もします・・・

質問②

「$(this).children('input, textarea').each(function(){」
では
「 $(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;
});」に進むのでしょうか？

質問③

「 if (!error_flag) 」は「error_flag = falseじゃない」⇔「error_flag = trueならば」という意味なのでしょうか？trueだと何があるのでしょうか？
であれば
「 if (!body)」は「body = $(this).val()じゃない」という意味になるのでしょうか？

質問④

「if (!error_flag) {
$('.contact-form').html('<h4>お問い合わせありがとうございます。</h4>');
}
return false;」の
「if (!error_flag)」は どんな意味があるんですか？

質問⑤

「return false;」はなぜ必要なんですか？

沢山質問してしまい恐縮なのですが宜しくお願い致しますm(__)m

[chelsy7110]

追記しました

[tanakashouzoux]

何度もありがとうございます！

熟読させて頂いてから再質問させて頂くと思いますm(__)m

Answer 2

(1)contact-formクラスがついたタグのフォームをサブミットした時
(2)エラーフラグを偽にしておく
(3)フォームの子要素(input,textarea)の一つ一つについて
(4)値をbody変数に代入し
(5)もしbodyがからでなければ
(6)その要素の直前のerror-messageクラスのついたタグに「入力してください」と書き
(7)エラーフラグを真にする
(8)そうでないなら
(9)その要素の直前のerror-messageクラスのついたタグのテキストを空にする
(10)ifを閉じて
(11)(3)のループを続ける
(13)もしエラーフラグが真じゃない＝偽のとき
(14)contact-formクラスの付いたタグの中身を<h4>・・・タグに書き換え
(16)サブミットを止めるために偽を返す
(17)全ての作業を終了