cssにおけるerror_flagを書く位置が分かりません

Question

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

コード上から2行目の「var error_flag=false;」を「var body = $(this).val();」の上に持ってくるとエラーが出るのですが、ダメな理由が分かりません
詳しい方、ご教示ください

Comments

[m.ts10806]

cssではなくjavascriptですね。

Answer 1

インデントがずれているので見づらいですが、下の方にあるif(!error_flag){は、.eachで回している関数の外側にあたります。

関数の外側で定義した変数は、内側でも使えますが、逆は無理なのです。

Answer 2

エラーメッセージの提示がないのでソースを見た限りでしかないのですが、

下記は、 $(this).children('input,textarea').each(function(){の外ですよね。

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

$(this).children('input,textarea').each(function(){の中に書くことにより、
varは変数の定義を行うものですが、グローバル空間で定義されていない限り、function(){}内でしか生きません（「変数のスコープ」で調べてください）
つまり、内部で定義されたものなので、そのスコープの外では参照できない、ということになります。
変数の未定義エラーのようなものが出ているはずです。

もし、変数error_flagを汎用的に使いたければグローバル空間$('.contact-form form').submit(function(){よりも外で定義すると良いでしょう。