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

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

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

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

195閲覧

メールフォームの入力チェックが通った場合のみ処理をしたい

MeB

総合スコア104

JavaScript

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

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/03/09 06:17

編集2018/03/09 08:12

タイトルの通り入力チェックは通った場合のみ画面の切り替えをしたいのですが、
どのようにしたらよいでしょうか?

現在は同時に処理が動いてしまっています。
メールフォームのチェックには
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へもいけない)
切り替え部分に関しましては特にこのような記述がいいなどはありません。

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

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

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

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

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

x_x

2018/03/09 08:02

そのプラグインの検証なら前の質問で解決したと思いますが、また同様の質問をしているのはなぜでしょうか? https://teratail.com/questions/116707
MeB

2018/03/09 08:08

今回はtype="button"の扱いについてではありません。プラグインを提示していますが根本的な質問はプラグインの検証ではないと思うのですがいかがでしょうか?
x_x

2018/03/09 08:13

いやいや、5回も更新してそれは……
MeB

2018/03/09 08:19

js部分は上書きしてますが、あとはほとんど残しております。追加部分は追記に…
guest

回答2

0

ベストアンサー

戻ると送信がどちらもsubmitで切り替えの処理が動いてないのでは

$('button[type="button"]').on('click', function(event) {

この条件に入っていない

投稿2018/03/09 08:23

date

総合スコア1820

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

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

MeB

2018/03/09 08:31

その通りでした… 本当にいつもありがとうございます!!!!
guest

0

質問内容が変わっていますが17:12更新分の質問で回答します。

JavaScript

1$("#form").validate(

いくつもフォームがあるようですが、検証対象としているのは一つだけです。
非表示フォームの検証は意図するものではないのではないかと思います。
どれを検証したいのか、よく確認してみましょう。

投稿2018/03/09 08:20

x_x

総合スコア13749

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

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

MeB

2018/03/09 08:30

度々すみませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問