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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1584閲覧

return変数はどのような機能なのでしょうか?

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/12/24 00:57

問い合わせフォームのチェック機能を作ったのですが、最後に返り値でreturn checkform;の中身がfalseだった場合送信が実行されないのですが、return falseだとなぜ実行されないのでしょうか?

下記の認識でよいのでしょうか?
falseがcheckform変数に入っていた場合は、送信が実行されない仕様になっているので、送信の命令が実行されずに一連の処理が終了する

return checkform;は変数の指定位置までもどる。checkform変数に戻ってくださいということ
という話も聞いたのですが、var checkform = true;という一番初めにその変数を定義したところに戻てループするのでしょうか?

//お問い合わせフォームチェック $(function(){ $('#js-error-inquiry').submit(function(){ var checkform = true; // 以下input一つ目 // inputタグ if($('.js-is-input-error1').val() == ''){ //まだエラーメッセージが出力されていなければ、背景色を長くする if($('.js-is-error--text-input1').text() == ''){ var heightGet = $('#js-height-adjustment').height(); // sectionタグ $('#js-height-adjustment').css({'height': heightGet + 'px', 'height':'+=30em'}) } // inputに文字が入っていなければ、必須項目と出るようにする。 // spanタグ $('.js-is-error--text-input1').text('必須項目です').css({'color': 'red', 'text-shadow': '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '2px 2px 2px #fff'}); // +改行を可能にするために必要 checkform = false; // var省略 }else{ //既にエラーメッセージがあった場合は背景色の長さを元に戻す // spanタグ if($('.js-is-error--text-input1').text() != ''){ //!= ''空でなかった時。inputが空で、spanにテキストが入っていた時に実行 var heightGet = $('#js-height-adjustment').height(); // sectionタグ $('#js-height-adjustment').css('height', heightGet + 'px').css('height','-=30em'); } // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。 $('.js-is-error--text-input1').text(''); // spanタグ } // 以下input二つ目 // inputタグ if($('.js-is-input-error2').val() == ''){ //まだエラーメッセージが出力されていなければ、背景色を長くする if($('.js-is-error--text-input2').text() == ''){ var heightGet = $('#js-height-adjustment').height(); // sectionタグ $('#js-height-adjustment').css('height', heightGet + 'px') .css('height','+=30em'); // console(test); } // inputに文字が入っていなければ、必須項目と出るようにする。 // spanタグ $('.js-is-error--text-input2').text('必須項目です').css({'color': 'red', 'text-shadow': '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '2px 2px 2px #fff'}); // +改行を可能にするために必要 checkform = false; // var省略 }else{ //既にエラーメッセージがあった場合は背景色の長さを元に戻す if($('.js-is-error--text-input2').text() != ''){ var heightGet = $('#js-height-adjustment').height(); // sectionタグ $('#js-height-adjustment').css('height', heightGet + 'px').css('height','-=30em'); } // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。 $('.js-is-error--text-input2').text(''); // spanタグ } // 以下textarea if($('.js-is-error-body').val() == ''){ //まだエラーメッセージが出力されていなければ、背景色を長くする if($('.js-is-error--text-texarea').text() == ''){ var heightGet = $('#js-height-adjustment').height(); // sectionタグ $('#js-height-adjustment').css('height', heightGet + 'px') .css('height','+=30em'); } // inputに文字が入っていなければ、必須項目と出るようにする。 // spanタグ $('.js-is-error--text-texarea').text('必須項目です').css({'color': 'red', 'text-shadow': '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '0px 0px 10px #fff,'+ '2px 2px 2px #fff'}); // +改行を可能にするために必要 checkform = false; // var省略 }else{ //既にエラーメッセージがあった場合は背景色の長さを元に戻す if($('.js-is-error--text-texarea').text() != ''){ var heightGet = $('#js-height-adjustment').height(); // sectionタグ $('#js-height-adjustment').css('height', heightGet + 'px').css('height','-=30em'); } // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。 $('.js-is-error--text-texarea').text(''); // spanタグ } // return checkform;(変数 )(テキストが入っている場合はture、入っていない場合はfalseが変数に入る。) // return checkform;は変数の指定位置までもどる。checkform変数に戻ってくださいということ。 // return false;の場合は、送信ボタンが実行されないようにしている。 var heightGet = $('#js-height-adjustment').height(); // sectionタグ return checkform; }); });

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

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

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

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

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

guest

回答2

0

ベストアンサー

trueがreturnされればsubmitを実行、falseがreturnされればsubmit実行をキャンセルする、submit()の仕様です。

投稿2016/12/24 01:12

naomi3

総合スコア1105

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

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

退会済みユーザー

退会済みユーザー

2016/12/24 01:35

return checkform;でsubmitイベントメソッドにcheckform変数に入っているtrueかfalseが取得されて、submitメソッドの仕様でfalseだったらこのメソッドは実行されず、trueだったら実行される仕様なのですね。 return checkform;は変数の指定位置までもどる。checkform変数に戻って処理がループするのではなく、submitメソッドがキャンセルされて、このプログラム自体が、行われずに終了するということですね。
naomi3

2016/12/24 02:01

すみません。言葉足らずでした。 実行、実行キャンセルされるのは「サーバへのsubmit動作」で、submit()メソッドがそのコールバック関数のreturn値に基づいて判断します。
退会済みユーザー

退会済みユーザー

2016/12/24 03:31

「サーバへのsubmit動作」 難しいですね。 サーバにこのinput内のテキストを送ってくれと、submit関数が伝えるのをキャンセルするので結果的に送られないということですかね?
naomi3

2016/12/24 04:13

サーバへデータを送りたいけれど、その前にチェックして、正しいデータだけを送るようにしたい。 そのためにコールバック関数付きsubmit()メソッドがあります。 submit()メソッドが、サーバへデータを送る直前に、コールバック関数を呼び出します。 コールバック関数は、チェック処理を行って、trueかfalseをsubmit()メソッドへreturnします。 submit()メソッドは、trueを受け取るとチェックOKとみなして、実際にsubmitすなわちサーバへデータを送ります。 falseを受け取るとチェックNGとみなして、サーバへデータを送りません。 これで、サーバへ正しいデータだけを送ることに成功! わかりましたか?
naomi3

2016/12/24 04:23

ただ、ユーザーから見ればサーバへデータを送っているかいないのかわからない。 そのために、ご自身のコードでチェックNGの場合は文字を赤に変えるなど、データが正しくないことをユーザーに伝える処理を行っているのですよね?
退会済みユーザー

退会済みユーザー

2016/12/24 04:36

input内の文字がない場合、必須項目と出るようにしていますが、そこまでの原理を初心者なのでわかっていませんでした。 正直何となくできている状態でした。 trueかfalseをsubmit()メソッドが受け取って、trueの時のみこのメソッドがサーバに情報を送るのですね。
退会済みユーザー

退会済みユーザー

2016/12/24 04:37

falseだと、サーバに送らずにこの処理は終了するということですね。
naomi3

2016/12/24 04:42

そうです。
退会済みユーザー

退会済みユーザー

2016/12/24 04:44

ありがとうございました。
guest

0

return checkform;は変数の指定位置までもどる。checkform変数に戻ってくださいということ

という話も聞いたのですが、var checkform = true;という一番初めにその変数を定義したところに戻てループするのでしょうか?

すごいガセですね。プログラミングの基本を学んで、間違った情報に左右されないようにしましょう。
関数を呼び出したところに戻ると言うことです。

投稿2016/12/24 01:38

otn

総合スコア84423

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

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

退会済みユーザー

退会済みユーザー

2016/12/24 01:41

return checkform;でsubmitイベントメソッドにcheckform変数に入っているtrueかfalseが取得されて、submitメソッドの仕様でfalseだったらこのメソッドは実行されず、trueだったら実行される仕様なのですね。 return checkform;は変数の指定位置までもどる。checkform変数に戻って処理がループするのではなく、submitメソッドがキャンセルされて、このプログラム自体が、行われずに終了するということですね。 一応webデザイナーの方から教わったのですが、やはりプログラミングのプロでないと、間違ったことを教えていることがあるのですね。 戻ってループするというのはデマなんですね。 戻り値とはあくまで処理結果を関数にわたすだけなのですね。
退会済みユーザー

退会済みユーザー

2016/12/24 01:42

ただ初心者の私には.valなどたくさんの関数があると.submitに返り値が返されるかわからないのですが、どれに返されるのかどうやって区別するのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問