タイトルの通り入力チェックは通った場合のみ画面の切り替えをしたいのですが、
どのようにしたらよいでしょうか?
現在は同時に処理が動いてしまっています。
メールフォームのチェックには
https://jqueryvalidation.org/
こちらのプラグインを使用しています。
~~ var validator = $("#form").validate({})
の中でvar checkを作ってtrue,falseを返して
切り替えのswitch文の中でcheckをとってきてif文で判断、trueなら切り替え。
のようなものを考えたのですがどうもうまくいきませんでした(書き方が悪いのだとは思いますが。)~~
js内の切り替え処理部分のご指摘をお願いします。
ご教示お願いします。
js
1$(function() { 2 3 var validator = $("#form").validate({ 4 errorClass: 'valid-err', 5 rules: { 6 'person_name': { 7 required: true, 8 }, 9 }, 10 messages: { 11 person_name: { 12 required: '*お名前は入力必須項目です' 13 }, 14 } 15 }); 16 17//切り替えの処理 18 $(function(){ 19 $('button[type="button"]').on('click', function(event) { 20 var result = validator.form(); 21 var check = validator.valid(); 22 switch($(this).text()){ 23 case "確認画面": 24 if(check==true){ 25 $('.form-area:eq(0),.form-area:eq(1)').toggleClass("active"); 26 } 27 break; 28 case "もどる": 29 $('.form-area:eq(0),.form-area:eq(1)').toggleClass("active"); 30 break; 31 case "送信": 32 $('.form-area:eq(1),.form-area:eq(2)').toggleClass("active"); 33 break; 34 case "フォーム入力に戻る": 35 $('.form-area:eq(0),.form-area:eq(2)').toggleClass("active"); 36 break; 37 } 38 }); 39 });
html
1<!-- エリア1 --> 2<div class="form-area active"> 3 <form id="form" action="index.php" method="post" name="form"> 4 <p>お名前<span>(必須)</span></p> 5 <input type="text" name="person_name" value="" class=""> 6 <div class="submit"><button type="button" name="mode" value="confirm"><img src="images/check.png" alt="送信"><span>確認画面</span></button></div> 7 </form> 8 </div> 9 10<!-- エリア2 --> 11 <div class="form-area"> 12 <h3 class="blue-title">確認画面</h3> 13 <form class="form-check" method="POST" action=""> 14 <p>お名前</p> 15 <p class=""></p> 16 <div class="submit-box"> 17 <button><img src="images/back.png" alt="送信" /><span>もどる</span></button> 18 <button type="submit"><img src="images/send.png" alt="送信" /><span>送信</span></button> 19 </div> 20 </form> 21 </div> 22 23<!-- エリア3 --> 24 <div class="form-area"> 25 <h3 class="blue-title">ありがとうございます</h3> 26 <div class="submit-end"><button><img src="images/back.png" alt="送信" /><span>フォーム入力に戻る</span></button></div> 27 </div>
追記
入力チェックがtrueの場合のみ切り替え(htmlでいうエリア1からエリア2への切り替え)はできましたが、
今度はエリア2からの切り替えができなくなってしまいました。(エリア2から1へも3へもいけない)
切り替え部分に関しましては特にこのような記述がいいなどはありません。
回答2件
あなたの回答
tips
プレビュー