回答編集履歴

5

修正

2019/08/29 01:24

投稿

m.ts10806
m.ts10806

スコア80765

test CHANGED
@@ -82,7 +82,13 @@
82
82
 
83
83
  自分で調べてほしいのであえてコメントは付けていません。
84
84
 
85
+ **ただし、不明点はこの場で全部解決すること**
86
+
87
+ これを以て質問しても結局「そのコード、前の質問でもらったもんでしょ?その回答者に聞けば?」とほぼ間違いなく言われます。
88
+
89
+
90
+
85
- HTMLもそれなりに調整しています。
91
+ HTMLもそれなりに調整していますのでJavaScriptだけ持っていかないようご注意を
86
92
 
87
93
 
88
94
 
@@ -130,7 +136,7 @@
130
136
 
131
137
  <h2>お問合せ内容を入力してください</h2>
132
138
 
133
- <form method="post" action="a" name="input_form" class="form">
139
+ <form method="post" action="" name="input_form" class="form">
134
140
 
135
141
  <span class="err_msg" id="name_err"></span>
136
142
 

4

修正

2019/08/29 01:24

投稿

m.ts10806
m.ts10806

スコア80765

test CHANGED
@@ -194,7 +194,7 @@
194
194
 
195
195
 
196
196
 
197
- if (name_value == '') {
197
+ if (name_value.trim() == '') {
198
198
 
199
199
  valid = false;
200
200
 

3

修正

2019/08/29 01:22

投稿

m.ts10806
m.ts10806

スコア80765

test CHANGED
@@ -73,3 +73,203 @@
73
73
  それに[前の質問の別の回答](https://teratail.com/questions/208753#reply-308092)にあるように要素や入力内容の参照や取得の仕方もきちんと見直したほうが良いでしょう。
74
74
 
75
75
  それで動くモノが作れたとしても評価されるものではなく、ほぼ使えないものです(古いので、業務では使わない)
76
+
77
+
78
+
79
+ # 作り直したコード
80
+
81
+
82
+
83
+ 自分で調べてほしいのであえてコメントは付けていません。
84
+
85
+ HTMLもそれなりに調整しています。
86
+
87
+
88
+
89
+ ```html
90
+
91
+ <!DOCTYPE html>
92
+
93
+ <html lang="ja">
94
+
95
+ <head>
96
+
97
+ <meta charset="UTF-8">
98
+
99
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
100
+
101
+ <title>Document</title>
102
+
103
+ <style>
104
+
105
+ .err_msg {
106
+
107
+ color: red;
108
+
109
+ margin-bottom: 0;
110
+
111
+ }
112
+
113
+
114
+
115
+ .input_box {
116
+
117
+ margin-top: 0;
118
+
119
+ }
120
+
121
+
122
+
123
+ </style>
124
+
125
+ </head>
126
+
127
+ <body>
128
+
129
+ <h1>お問合せ画面</h1>
130
+
131
+ <h2>お問合せ内容を入力してください</h2>
132
+
133
+ <form method="post" action="a" name="input_form" class="form">
134
+
135
+ <span class="err_msg" id="name_err"></span>
136
+
137
+ <p id="name_box" class="input_box">
138
+
139
+ (必須)名前<input type="text" name="name" id="input_name">
140
+
141
+ </p>
142
+
143
+ <span class="err_msg" id="age_err"></span>
144
+
145
+ <p id="age_box" class="input_box">
146
+
147
+ (必須)年齢<input type="number" size="2" name="age" id="input_age">歳
148
+
149
+ </p>
150
+
151
+ <span class="err_msg" id="color_err"></span>
152
+
153
+ <p id="color_list" class="input_box">
154
+
155
+ 好きな色
156
+
157
+ <label><input type="checkbox" name="color[]" value="red">赤</label>
158
+
159
+ <label><input type="checkbox" name="color[]" value="green">緑</label>
160
+
161
+ <label><input type="checkbox" name="color[]" value="blue">青</label>
162
+
163
+ <label><input type="checkbox" name="color[]" value="other">それ以外</label>
164
+
165
+ <label><input type="checkbox" name="color[]" value="nothing">特になし</label>
166
+
167
+ </p>
168
+
169
+ <input type="button" id="submit_btn" value="送信">
170
+
171
+ </form>
172
+
173
+ <script>
174
+
175
+ document.addEventListener('DOMContentLoaded', function() {
176
+
177
+ document.getElementById('submit_btn').addEventListener('click', function(e) {
178
+
179
+ let valid = true;
180
+
181
+
182
+
183
+ let error_msg_class = document.getElementsByClassName('err_msg');
184
+
185
+ for(er=0;er<error_msg_class.length;er++){
186
+
187
+ error_msg_class[er].textContent = "";
188
+
189
+ }
190
+
191
+
192
+
193
+ let name_value = document.getElementById('input_name').value;
194
+
195
+
196
+
197
+ if (name_value == '') {
198
+
199
+ valid = false;
200
+
201
+ document.getElementById('name_err').textContent = '名前が入力されていません';
202
+
203
+ }
204
+
205
+
206
+
207
+ let age_value = document.getElementById('input_age').value;
208
+
209
+ if (age_value.match(/[^0-9]/g)
210
+
211
+ ||
212
+
213
+ parseInt(age_value, 10) + "" != age_value
214
+
215
+ ) {
216
+
217
+ valid = false;
218
+
219
+ document.getElementById('age_err').textContent = '年齢は数字のみ入力してください';
220
+
221
+ }
222
+
223
+
224
+
225
+ let color_list = document.querySelectorAll("input[type='checkbox'][name='color[]']");
226
+
227
+
228
+
229
+ let checked_flag = false;
230
+
231
+ for(cl=0;cl<color_list.length;cl++){
232
+
233
+ if (color_list[cl].checked) {
234
+
235
+ checked_flag = true;
236
+
237
+ break;
238
+
239
+ }
240
+
241
+ }
242
+
243
+ if(!checked_flag){
244
+
245
+ valid = false;
246
+
247
+ document.getElementById('color_err').textContent = 'チェックされていません';
248
+
249
+ }
250
+
251
+
252
+
253
+ if (valid) {
254
+
255
+ document.input_form.submit();
256
+
257
+ }
258
+
259
+
260
+
261
+ });
262
+
263
+ });
264
+
265
+ </script>
266
+
267
+ </body>
268
+
269
+ </html>
270
+
271
+ ```
272
+
273
+
274
+
275
+ 参考まで。

2

修正

2019/08/29 01:20

投稿

m.ts10806
m.ts10806

スコア80765

test CHANGED
@@ -56,8 +56,6 @@
56
56
 
57
57
 
58
58
 
59
-
60
-
61
59
  そこだけ直してももう1つ書いた「メッセージずっと出っ放し+追記され続けるという現象」は起きてるので、**これについては3回目の指摘なので現象は認識されているものとこれを見ている人は思っているのでちゃんと調べて自己解決してください。**
62
60
 
63
61
  ![イメージ説明](9639e2d08bf253cc1df0426750fd1b1a.png)
@@ -67,3 +65,11 @@
67
65
  [insertAdjacentHTML()](https://developer.mozilla.org/ja/docs/Web/API/Element/insertAdjacentHTML)の仕様を重々確認しておくと良いのでは。私ならバリデーション処理の前に全エラーを削除しますけどね。
68
66
 
69
67
  「エラーあったら残し続けておく」というのは非常にナンセンスな作りです。無駄な分岐が増えるだけの話。
68
+
69
+
70
+
71
+
72
+
73
+ それに[前の質問の別の回答](https://teratail.com/questions/208753#reply-308092)にあるように要素や入力内容の参照や取得の仕方もきちんと見直したほうが良いでしょう。
74
+
75
+ それで動くモノが作れたとしても評価されるものではなく、ほぼ使えないものです(古いので、業務では使わない)

1

修正

2019/08/29 00:24

投稿

m.ts10806
m.ts10806

スコア80765

test CHANGED
@@ -52,6 +52,10 @@
52
52
 
53
53
 
54
54
 
55
+ 他についても同様のことが言えるのでは。
56
+
57
+
58
+
55
59
 
56
60
 
57
61
  そこだけ直してももう1つ書いた「メッセージずっと出っ放し+追記され続けるという現象」は起きてるので、**これについては3回目の指摘なので現象は認識されているものとこれを見ている人は思っているのでちゃんと調べて自己解決してください。**