質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2048閲覧

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

tanakashouzoux

総合スコア52

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/08/13 23:01

html

1 <div class="contact-form"> 2 <h4>メッセージを送る</h4> 3 <form> 4 <div class="error-message"></div> 5 <input type="text" name="email" placeholder="Email" class="contact-email"> 6 <div class="error-message"></div> 7 <input type="text" name="subject" placeholder="Subject" class="contact-subject"> 8 <div class="error-message"></div> 9 <textarea name="message" placeholder="Message"></textarea> 10 <button type="submit" class="btn btn-contact">Submit</button> 11 </form> 12 </div> 13
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で何が起こっているのか全く分かりません

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

javascript

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

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

javascript

1 var error_flag = false;

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

javascript

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

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

javascript

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

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

javascript

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

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

javascript

1 if (!error_flag) { 2 $('.contact-form').html('<h4>お問い合わせありがとうございます。</h4>'); 3 } 4 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
その通りです。

投稿2017/08/14 00:50

編集2017/08/14 01:41
chelsy7110

総合スコア596

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tanakashouzoux

2017/08/14 01:18

コメントありがとうございます! あなたは神ですか?! 理解が深まりました!ありがとうございます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
tanakashouzoux

2017/08/14 02:08

何度もありがとうございます! 熟読させて頂いてから再質問させて頂くと思いますm(__)m
guest

0

(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)全ての作業を終了

投稿2017/08/14 00:54

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問