teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問処理が通ったら別の処理を実行したい

編集履歴

質問編集履歴

5

削除された内容の復元を行いました

2018/03/09 01:03

投稿

MeB
MeB

スコア104

test CHANGED
File without changes
test CHANGED
@@ -1 +1,89 @@
1
+ **やりたいこと**
2
+
3
+ 「入力チェックjsが通ったら表示切り替えjsの処理が実行されるようにしたい。」
4
+
5
+ 現在は同時に動いてしまっていて、
6
+
7
+ 当たり前ですが以下のようになっているため
8
+
9
+ 入力チェックに引っかかっても画面切り替えの処理が動いています。
10
+
1
- 同じような質問をしてしまったため削除依頼を出しております。回答をいただいていながら申し訳ありません。
11
+ 入力チェックで引っかかった場合は画面切り替えの処理が実行されないようにしたいのですが、
12
+
13
+ どのようにしたら良いのでしょうか？
14
+
15
+ お手数ですが、ご教示お願いします。
16
+
17
+ ```js
18
+
19
+ // 入力内容チェック
20
+
21
+ function input_check(){
22
+
23
+ var result = true;
24
+
25
+ // エラー用装飾のためのクラスリセット
26
+
27
+ $('#person_name_check').removeClass("inp_error");
28
+
29
+ // 入力エラー文をリセット
30
+
31
+ $("#person_name_check_error").empty();
32
+
33
+ // 入力内容セット
34
+
35
+ var person_name_check = $("#person_name_check").val();
36
+
37
+ // 入力内容チェック
38
+
39
+ // person_name
40
+
41
+ if(person_name_check == ""){
42
+
43
+ $("#person_name_check_error").html("<i class='fa fa-exclamation-circle'></i> お名前は必須です。");
44
+
45
+ $("#person_name_check").addClass("inp_error");
46
+
47
+ result = false;
48
+
49
+ }
50
+
51
+ return result;
52
+
53
+ }
54
+
55
+ //画面切り替え
56
+
57
+ $(function(){
58
+
59
+ $('button').on('click',function(){
60
+
61
+ switch($(this).text()){
62
+
63
+ case "確認画面":
64
+
65
+ case "もどる":
66
+
67
+ $('.form-area:eq(0),.form-area:eq(1)').toggleClass("active");
68
+
69
+ break;
70
+
71
+ case "送信":
72
+
73
+ $('.form-area:eq(1),.form-area:eq(2)').toggleClass("active");
74
+
75
+ break;
76
+
77
+ case "フォーム入力に戻る":
78
+
79
+ $('.form-area:eq(0),.form-area:eq(2)').toggleClass("active");
80
+
81
+ break;
82
+
83
+ }
84
+
85
+ });
86
+
87
+ });
88
+
89
+ ```

4

訂正

2018/03/09 01:03

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- メールフォームで入力チェックが通ったら別の処理を実行したい
1
+ 処理が通ったら別の処理を実行したい
test CHANGED
@@ -1,109 +1 @@
1
- **やりたいこと**
2
-
3
- 「入力チェックjsが通ったら表示切り替えjsの処理が実行されるようにしたい。」
4
-
5
-
6
-
7
- 現在は同時に動いてしまっていて、
8
-
9
- 当たり前ですが以下のようになっているため
10
-
11
- 入力チェックに引っかかっても画面切り替えの処理が動いています。
12
-
13
-
14
-
15
- 入力チェックで引っかかった場合は画面切り替えの処理が実行されないようにしたいのですが、
1
+ 同じような質問をしてしまったため削除依頼を出しております。回答をいただいていながら申し訳ありません。
16
-
17
- どのようにしたら良いのでしょうか？
18
-
19
-
20
-
21
- お手数ですが、ご教示お願いします。
22
-
23
-
24
-
25
- ```js
26
-
27
- // 入力内容チェック
28
-
29
- function input_check(){
30
-
31
- var result = true;
32
-
33
-
34
-
35
- // エラー用装飾のためのクラスリセット
36
-
37
- $('#person_name_check').removeClass("inp_error");
38
-
39
-
40
-
41
- // 入力エラー文をリセット
42
-
43
- $("#person_name_check_error").empty();
44
-
45
-
46
-
47
- // 入力内容セット
48
-
49
- var person_name_check = $("#person_name_check").val();
50
-
51
-
52
-
53
- // 入力内容チェック
54
-
55
-
56
-
57
- // person_name
58
-
59
- if(person_name_check == ""){
60
-
61
- $("#person_name_check_error").html("<i class='fa fa-exclamation-circle'></i> お名前は必須です。");
62
-
63
- $("#person_name_check").addClass("inp_error");
64
-
65
- result = false;
66
-
67
- }
68
-
69
- return result;
70
-
71
- }
72
-
73
-
74
-
75
- //画面切り替え
76
-
77
- $(function(){
78
-
79
- $('button').on('click',function(){
80
-
81
- switch($(this).text()){
82
-
83
- case "確認画面":
84
-
85
- case "もどる":
86
-
87
- $('.form-area:eq(0),.form-area:eq(1)').toggleClass("active");
88
-
89
- break;
90
-
91
- case "送信":
92
-
93
- $('.form-area:eq(1),.form-area:eq(2)').toggleClass("active");
94
-
95
- break;
96
-
97
- case "フォーム入力に戻る":
98
-
99
- $('.form-area:eq(0),.form-area:eq(2)').toggleClass("active");
100
-
101
- break;
102
-
103
- }
104
-
105
- });
106
-
107
- });
108
-
109
- ```

3

訂正

2018/03/08 03:44

投稿

MeB
MeB

スコア104

test CHANGED
File without changes
test CHANGED
File without changes

2

訂正

2018/03/08 03:25

投稿

MeB
MeB

スコア104

test CHANGED
@@ -1 +1 @@
1
- メールフォームの入力チェック後の処理について
1
+ メールフォームで入力チェックが通ったら別の処理を実行したい
test CHANGED
@@ -1,24 +1,20 @@
1
- やりたいことは、
1
+ **やりたいこと**
2
2
 
3
- 「フォームの入力チェックが通った場合のみ表示切り替えをしたい」
3
+ 「入力チェックjsが通ったら表示切り替えjsの処理が実行されるようにしたい。」
4
-
5
- 下記のhtmlでいうと、フォームの入力チェックが通った場合のみエリア１からエリア２に切り替えしたいということです。
6
4
 
7
5
 
8
6
 
9
- 質問は２点あります。
7
+ 現在は同時に動いてしまっていて、
10
8
 
11
- １、フォームの入力チェックが通った場合のみ表示切り替えの処理を実行させるにはどのようにしたら良いか
9
+ 当たり前ですが以下のようになっているため
12
10
 
13
- ２、入力チェックの処理を書いたjsを外部ファイルからの読み込みにすると動作しない。（index.php内に記述すると動作する）
11
+ 入力チェックに引っかかっても画面切り替えの処理が動いています。
14
12
 
15
13
 
16
14
 
17
- の２点になります。
15
+ 入力チェックで引っかかった場合は画面切り替えの処理が実行されないようにしたいのですが、
18
16
 
19
- １についてはあまり検討もついていないです。ifなどで判断するのでしょうか？
17
+ どのようにしたら良いのでしょうか？
20
-
21
- ２についてはfunction input_check()なような気がしますが記述の仕方がわからず…
22
18
 
23
19
 
24
20
 
@@ -26,13 +22,9 @@
26
22
 
27
23
 
28
24
 
29
- 入力チェックjs
30
-
31
25
  ```js
32
26
 
33
- $(function(){
34
-
35
- // 入力内容チェックのための関数
27
+ // 入力内容チェック
36
28
 
37
29
  function input_check(){
38
30
 
@@ -60,7 +52,7 @@
60
52
 
61
53
  // 入力内容チェック
62
54
 
63
-
55
+
64
56
 
65
57
  // person_name
66
58
 
@@ -78,13 +70,9 @@
78
70
 
79
71
  }
80
72
 
81
- });
82
73
 
83
- ```
84
74
 
85
- 表示切り替えjs
75
+ //画面切り替え
86
-
87
- ```js
88
76
 
89
77
  $(function(){
90
78
 
@@ -119,69 +107,3 @@
119
107
  });
120
108
 
121
109
  ```
122
-
123
- ```html
124
-
125
- <section class="form">
126
-
127
- <!-- エリア１ -->
128
-
129
- <div class="form-area active">
130
-
131
- <form id="form" action="index.php" method="post" nema="form">
132
-
133
- <p>お名前<span>（必須）</span></p>
134
-
135
- <input type="text" id="person_name_check" name="person_name" value="">
136
-
137
- <span id="person_name_check_error" class="error_m"></span>
138
-
139
- <div class="submit"><button type="button" name="mode" value="confirm" id="btn_id" onclick="input_check();return false;"><img src="images/check.png" alt="送信"><span>確認画面</span></button></div>
140
-
141
- </form>
142
-
143
- </div>
144
-
145
-
146
-
147
- <!-- エリア２ -->
148
-
149
- <div class="form-area">
150
-
151
- <h3 class="blue-title">お問い合わせ内容　確認画面</h3>
152
-
153
- <p class="supplement">よろしければ「 送信する 」を押してください。</p>
154
-
155
- <form class="form-check" method="POST" action="">
156
-
157
- <p>お名前</p>
158
-
159
- <p id="person_name"></p>
160
-
161
- </form>
162
-
163
- <div class="submit-box">
164
-
165
- <button><img src="images/back.png" alt="送信" /><span>もどる</span></button>
166
-
167
- <button type="submit"><img src="images/send.png" alt="送信" /><span>送信</span></button>
168
-
169
- </div>
170
-
171
- </div>
172
-
173
-
174
-
175
- <!-- エリア３ -->
176
-
177
- <div class="form-area">
178
-
179
- <h3 class="blue-title">ありがとうございます</h3>
180
-
181
- <div class="submit-end"><button><img src="images/back.png" alt="送信" /><span>フォーム入力に戻る</span></button></div>
182
-
183
- </div>
184
-
185
- </section>
186
-
187
- ```

1

訂正

2018/03/08 03:24

投稿

MeB
MeB

スコア104

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,8 @@
1
1
  やりたいことは、
2
2
 
3
3
  「フォームの入力チェックが通った場合のみ表示切り替えをしたい」
4
+
5
+ 下記のhtmlでいうと、フォームの入力チェックが通った場合のみエリア１からエリア２に切り替えしたいということです。
4
6
 
5
7
 
6
8
 
@@ -122,6 +124,8 @@
122
124
 
123
125
  <section class="form">
124
126
 
127
+ <!-- エリア１ -->
128
+
125
129
  <div class="form-area active">
126
130
 
127
131
  <form id="form" action="index.php" method="post" nema="form">
@@ -139,6 +143,8 @@
139
143
  </div>
140
144
 
141
145
 
146
+
147
+ <!-- エリア２ -->
142
148
 
143
149
  <div class="form-area">
144
150
 
@@ -166,6 +172,8 @@
166
172
 
167
173
 
168
174
 
175
+ <!-- エリア３ -->
176
+
169
177
  <div class="form-area">
170
178
 
171
179
  <h3 class="blue-title">ありがとうございます</h3>