やりたいことはタイトルの通りです。
現在は同時に実行されてしまい、入力チェックの意味がない状態です…
入力チェックで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>
回答1件
あなたの回答
tips
プレビュー