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

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

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

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

Q&A

解決済

1回答

2467閲覧

メールフォームで入力チェックが通ったら別の処理を実行したい

MeB

総合スコア104

JavaScript

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

0グッド

0クリップ

投稿2018/03/08 03:56

編集2018/03/08 04:54

やりたいことはタイトルの通りです。

現在は同時に実行されてしまい、入力チェックの意味がない状態です…

入力チェックでtrueの場合のみ画面切り替えの処理が動くようにしたいのですが、どのように記述したら良いのでしょうか?
if文かとおもい試してはいますがどのように記述するのかいまいち把握しておりません。
加えて

Uncaught ReferenceError: input_check is not defined
at HTMLButtonElement.onclick (VM4278 :341)

コンソールにこのようなエラーが出てしまう始末です…(下記のコードのままではエラーで出ていません。)
メール送信の処理はまだ書いておりません。

ご教授よろしくお願いします。

js

1 // 入力内容チェック 2 function input_check(){ 3 var result = true; 4 5 // エラー用装飾のためのクラスリセット 6 $('#person_name_check').removeClass("inp_error"); 7 8 // 入力エラー文をリセット 9 $("#person_name_check_error").empty(); 10 11 // 入力内容セット 12 var person_name_check = $("#person_name_check").val(); 13 14 // 入力内容チェック 15 16 // person_name 17 if(person_name_check == ""){ 18 $("#person_name_check_error").html("<i class='fa fa-exclamation-circle'></i> お名前は必須です。"); 19 $("#person_name_check").addClass("inp_error"); 20 result = false; 21 } 22 return result; 23} 24 25//画面切り替え 26$(function(){ 27 $('button').on('click',function(){ 28 switch($(this).text()){ 29 case "確認画面": 30 case "もどる": 31 $('.form-area:eq(0),.form-area:eq(1)').toggleClass("active"); 32 break; 33 case "送信": 34 $('.form-area:eq(1),.form-area:eq(2)').toggleClass("active"); 35 break; 36 case "フォーム入力に戻る": 37 $('.form-area:eq(0),.form-area:eq(2)').toggleClass("active"); 38 break; 39 } 40 }); 41});

html

1<div class="form-area active"> 2 <form id="form" action="index.php" method="post" name="form"> 3 <p>お名前<span>(必須)</span></p> 4 <input type="text" id="person_name_check" name="person_name" value=""> 5 <span id="person_name_check_error" class="error_m"></span> 6 <button type="button" name="mode" value="confirm" id="btn_id" onclick="input_check();return false;"><img src="images/check.png" alt="送信"><span>確認画面</span></button> 7 </form> 8 </div> 9 10 <div class="form-area"> 11 <h3 class="blue-title">確認画面</h3> 12 13 <form class="form-check" method="POST" action=""> 14 <p>お名前</p> 15 <p id="person_name"></p> 16 </form> 17 <div class="submit-box"> 18 <button><img src="images/back.png" alt="送信" /><span>もどる</span></button> 19 <button type="submit"><img src="images/send.png" alt="送信" /><span>送信</span></button> 20 </div> 21 </div> 22 23 <div class="form-area"> 24 <h3 class="blue-title">ありがとうございます</h3> 25 <div class="submit-end"><button><img src="images/back.png" alt="送信" /><span>フォーム入力に戻る</span></button></div> 26 </div>

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

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

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

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

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

m.ts10806

2018/03/08 04:23

nema="form"のnemaって何でしょうか?タイプミスでしょうか。。。 また、エラーメッセージの意味や解決方法などは調べましたか?
MeB

2018/03/08 04:54

すみません。タイプミスです。調べていますが、関数の読み込むタイミングや呼び出し方がおかしいという感じだとは思いますが、今回のものに該当するようなものをまだ見つけられていません。
guest

回答1

0

ベストアンサー

input_checkをswitch文内に入れて処理
input_checkでのreturnの値で送信を表示する処理を入れればチェックができると思います

JavaScript

1(function(){ 2 $('button').on('click',function(){ 3 switch($(this).text()){ 4 case "確認画面": 5 check = input_check(); 6 if(check==true){ 7 $('.form-area:eq(0),.form-area:eq(1)').toggleClass("active"); 8 } 9 break; 10 case "もどる": 11 $('.form-area:eq(0),.form-area:eq(1)').toggleClass("active"); 12 break; 13 case "送信": 14 $('.form-area:eq(1),.form-area:eq(2)').toggleClass("active"); 15 break; 16 case "フォーム入力に戻る": 17 $('.form-area:eq(0),.form-area:eq(2)').toggleClass("active"); 18 break; 19 } 20 }); 21});

HTML

1<button type="button" name="mode" value="confirm" id="btn_id"><img src="images/check.png" alt="送信"><span>確認画面</span></button>

投稿2018/03/08 04:52

date

総合スコア1820

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

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

MeB

2018/03/08 05:03

$とonclickを加えたら思った通りの動きができました! こういう時はifではなくswitchなのですね。本当にありがとうございます!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問