teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Webサイトのお問い合わせフォームにバリデーションをつけたい。

編集履歴

質問編集履歴

3

本文の文法と問題点を修正

2019/10/12 09:30

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- webサイトのお問い合わせフォームにバリデーションをつけたい。
1
+ Webサイトのお問い合わせフォームにバリデーションをつけたい。
test CHANGED
@@ -2,327 +2,321 @@
2
2
 
3
3
  webサイトのお問い合わせフォームにバリデーションをつけたい。
4
4
 
5
+ フォームに入力(index.php)⇒「確認ページ」(confirm.php)⇒「サンクスページ」⇒投稿者に確認メールを自動送信する、という流れまでphpが正常に動作するのですが、
6
+
7
+ 現在の設定だとバリデーションの部分のエラー表示が「確認ページ」に出るので、
8
+
9
+ （index.php）のフォーム入力欄の上にエラー表示を出したい。
10
+
11
+
12
+
13
+ ### 該当のソースコード（フォームの入力ページ：index.php)
14
+
15
+
16
+
5
- 最終的には、
17
+ ```php
18
+
6
-
19
+ <?php
20
+
21
+ // htmlentitiesのショートカット関数
22
+
23
+ function he($str){
24
+
7
- http://webeg.info/php-course/step2-020/
25
+ return htmlentities($str, ENT_QUOTES, "UTF-8");
26
+
8
-
27
+ }
28
+
9
- のサイトにあるように
29
+ ?>
30
+
10
-
31
+ <!DOCTYPE html>
32
+
33
+ <html lang="ja">
34
+
35
+ <head></head>
36
+
11
- ・変数のホワイトリスト化
37
+ <body>
38
+
12
-
39
+ ～中略～
40
+
41
+ <form class="form" id="form1" action="confirm.php" method="post" name="form" onsubmit="return validate()">
42
+
43
+ <p class="name">
44
+
45
+ <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="お名前" value="<?php echo he($name); ?>" id="name" />
46
+
13
- ・サニタイズ（サニタイジング）
47
+ </p>
48
+
14
-
49
+ <p class="email">
50
+
51
+ <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="メールアドレス" value="<?php echo he($email); ?>" />
52
+
53
+ </p>
54
+
55
+ <p class="kenmei">
56
+
57
+ <input name="kenmei" type="text" class="validate[required,custom[onlyLetter]] feedback-input" id="kenmei" name="kenmei" placeholder="件名" value="<?php echo he($kenmei); ?>" />
58
+
59
+ </p>
60
+
61
+ <p class="message">
62
+
63
+ <textarea name="message" class="validate[required,length[6,300]] feedback-input" id="message" placeholder="本文"><?php echo he($message); ?></textarea>
64
+
65
+ </p>
66
+
67
+ <div class="submit"><button type="submit" id="button-blue">確認画面へ</button></div>
68
+
15
- ・クロスサイトスクリプティングの実験
69
+ </form>
16
-
17
- ・バリデート（バリデーション）
70
+
18
-
19
- ・入力必須チェック
20
-
21
- ・正規表現での形式チェック
22
-
23
- ・エラー時の初期表示をセット
24
-
25
- ・ヌルバイト除去
26
-
27
- を完備したいのですが、バリデーションでつまづいています。
28
-
29
-
30
-
31
- ### 発生している問題・エラーメッセージ
71
+ </body>
72
+
32
-
73
+ </html>
33
-
34
74
 
35
75
  ```
36
76
 
77
+
78
+
79
+ ### 当該のソースコード（入力内容の確認ページ：confirm.php）
80
+
81
+ ```php
82
+
83
+ <?php
84
+
85
+ // htmlentitiesのショートカット関数
86
+
87
+ function he($str){
88
+
89
+ return htmlentities($str, ENT_QUOTES, "UTF-8");
90
+
91
+ }
92
+
93
+
94
+
95
+ $page_error = ""; // エラーメッセージ
96
+
97
+ // エラーチェック
98
+
99
+ if (isset($_POST["submit"])) {
100
+
101
+ if ($email == "") {
102
+
103
+ $page_error = "メールアドレスを入力してください\n";
104
+
105
+ }
106
+
107
+ if ($page_error == "") {
108
+
109
+ if (!preg_match('/^([a-zA-Z0-9.\_\-+?\#\&\%])*@([a-zA-Z0-9\_\-])+([a-zA-Z0-9.\_\-]+)+$/', $email)) {
110
+
111
+ $page_error = "メールアドレスを正しく入力してください\n";
112
+
113
+ }
114
+
115
+ }
116
+
117
+ }
118
+
119
+
120
+
121
+ // フォームのボタンが押されたら
122
+
123
+ if ($_SERVER["REQUEST_METHOD"] == "POST") {
124
+
125
+ // フォームから送信されたデータを各変数に格納
126
+
127
+ $name = $_POST["name"];
128
+
129
+ $email = $_POST["email"];
130
+
131
+ $kenmei = $_POST["kenmei"];
132
+
133
+ $message = $_POST["message"];
134
+
135
+ }
136
+
137
+
138
+
139
+ // 送信ボタンが押されたら
140
+
141
+ if (isset($_POST["submit"])) {
142
+
143
+ // 送信ボタンが押された時に動作する処理をここに記述する
144
+
145
+
146
+
147
+ // 日本語をメールで送る場合のお決まり
148
+
149
+ mb_language("ja");
150
+
151
+ mb_internal_encoding("UTF-8");
152
+
153
+
154
+
155
+ // 件名を変数subjectに格納
156
+
157
+ $subject = "［自動送信］お問い合わせ内容の確認";
158
+
159
+
160
+
161
+ // メール本文を変数bodyに格納
162
+
163
+ $body = <<< EOM
164
+
165
+ {$name}　様
166
+
167
+
168
+
169
+ お問い合わせありがとうございます。
170
+
171
+ 以下の内容が送信されました。
172
+
173
+ =============================
174
+
175
+ ■お名前：{$name}
176
+
177
+ ■メールアドレス：{$email}
178
+
179
+ ■件名：{$kenmei}
180
+
181
+ ■お問い合わせ内容：
182
+
183
+ {$message}
184
+
185
+ ==============================
186
+
187
+ 内容を確認の上、担当者から折り返しご連絡いたします。
188
+
189
+ 今しばらくお待ちください。
190
+
191
+ ※なお、こちらのメールアドレスは送信専用となっております。
192
+
193
+ 　ご返信いただきましてもご返答はできかねますのでご了承ください。
194
+
195
+
196
+
197
+ EOM;
198
+
199
+
200
+
201
+ // 送信元のメールアドレスを変数fromEmailに格納
202
+
203
+ $fromEmail = "メールアドレス@gmail.com";
204
+
205
+
206
+
207
+ // 送信元の名前を変数fromNameに格納
208
+
209
+ $fromName = "株式会社●●●";
210
+
211
+
212
+
213
+ // ヘッダ情報を変数headerに格納する
214
+
215
+ $header = "From: " .mb_encode_mimeheader($fromName) ."<{$fromEmail}>";
216
+
217
+
218
+
219
+ // メール送信を行う
220
+
221
+ mb_send_mail($email, $subject, $body, $header);
222
+
223
+
224
+
225
+ // サンクスページに画面遷移させる
226
+
227
+ header("Location: thanks.php");
228
+
229
+ exit;
230
+
231
+ }
232
+
233
+ ?>
234
+
235
+ <!DOCTYPE html>
236
+
237
+ <html lang="ja">
238
+
239
+ <head>
240
+
241
+ ～中略～
242
+
243
+ </head>
244
+
245
+ <body>
246
+
37
- フォームに入力(index.php)⇒「確認ページ」(confirm.php)⇒「サンクスページ」⇒投稿者に確認メールを自動送信する
247
+ <form action="confirm.php" method="post">
248
+
38
-
249
+ <input type="hidden" name="name" value="<?php echo he($name); ?>">
250
+
251
+ <input type="hidden" name="email" value="<?php echo he($email); ?>">
252
+
253
+ <input type="hidden" name="kenmei" value="<?php echo he($kenmei); ?>">
254
+
255
+ <input type="hidden" name="message" value="<?php echo he($message); ?>">
256
+
39
- という流れまではphpが動作するのですが、バリデーションの部分が作れず、困っています。
257
+ <p class="kakunin_title">お問い合わせ内容がよろしければ、「送信する」ボタンを押して下さい。</p>
258
+
259
+ <div>
260
+
261
+ <div><label>お名前</label><p><?php echo he($name); ?></p></div>
262
+
263
+ <div><label>メールアドレス</label><span class="error_text"><?php echo he($page_error); ?></span></div>
264
+
265
+ <div><label>件名</label><p><?php echo he($kenmei); ?></p></div>
266
+
267
+ <div><label>お問い合わせ内容</label><p><?php echo nl2br(he($message)); ?></p></div>
268
+
269
+ </div>
270
+
271
+ <input class="syusei" type="button" value="内容を修正する" onclick="history.back(-1)">
272
+
273
+ <button class="sousin" type="submit" name="submit">送信する</button>
274
+
275
+ </form>
276
+
277
+ ～中略～
278
+
279
+ </body>
280
+
281
+ </html>
40
282
 
41
283
  ```
42
284
 
43
285
 
44
286
 
45
- ### 該当のソースコード（フォームの入力ページ：index.php)
46
-
47
-
48
-
49
- ```php
50
-
51
- <?php
287
+ ### 試したこと
288
+
52
-
289
+ **【バリデーションのPHP部分】**
290
+
291
+ $page_error = ""; // エラーメッセージ
292
+
53
- // htmlentitiesのショートカット関数
293
+ // エラーチェック
54
-
55
- function he($str){
294
+
56
-
57
- return htmlentities($str, ENT_QUOTES, "UTF-8");
295
+ if (isset($_POST["submit"])) {
296
+
297
+ if ($email == "") {
298
+
299
+ $page_error = "メールアドレスを入力してください\n";
300
+
301
+ }
302
+
303
+ if ($page_error == "") {
304
+
305
+ if (!preg_match('/^([a-zA-Z0-9.\_\-+?\#\&\%])*@([a-zA-Z0-9\_\-])+([a-zA-Z0-9.\_\-]+)+$/', $email)) {
306
+
307
+ $page_error = "メールアドレスを正しく入力してください\n";
308
+
309
+ }
310
+
311
+ }
58
312
 
59
313
  }
60
314
 
61
- ?>
62
-
63
- <!DOCTYPE html>
64
-
65
- <html lang="ja">
66
-
67
- <head></head>
68
-
69
- <body>
70
-
71
- ～中略～
72
-
73
- <form class="form" id="form1" action="confirm.php" method="post" name="form" onsubmit="return validate()">
74
-
75
- <p class="name">
76
-
77
- <input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="お名前" value="<?php echo he($name); ?>" id="name" />
78
-
79
- </p>
80
-
81
- <p class="email">
82
-
83
- <input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="メールアドレス" value="<?php echo he($email); ?>" />
84
-
85
- </p>
86
-
87
- <p class="kenmei">
88
-
89
- <input name="kenmei" type="text" class="validate[required,custom[onlyLetter]] feedback-input" id="kenmei" name="kenmei" placeholder="件名" value="<?php echo he($kenmei); ?>" />
90
-
91
- </p>
92
-
93
- <p class="message">
94
-
95
- <textarea name="message" class="validate[required,length[6,300]] feedback-input" id="message" placeholder="本文"><?php echo he($message); ?></textarea>
96
-
97
- </p>
98
-
99
- <div class="submit"><button type="submit" id="button-blue">確認画面へ</button></div>
100
-
101
- </form>
102
-
103
- </body>
104
-
105
- </html>
106
-
107
- ```
108
-
109
-
110
-
111
- ### 当該のソースコード（入力内容の確認ページ：confirm.php）
112
-
113
- ```php
114
-
115
- <?php
116
-
117
- // htmlentitiesのショートカット関数
118
-
119
- function he($str){
120
-
121
- return htmlentities($str, ENT_QUOTES, "UTF-8");
122
-
123
- }
124
-
125
-
126
-
127
- // フォームのボタンが押されたら
128
-
129
- if ($_SERVER["REQUEST_METHOD"] == "POST") {
130
-
131
- // フォームから送信されたデータを各変数に格納
132
-
133
- $name = $_POST["name"];
134
-
135
- $email = $_POST["email"];
136
-
137
- $kenmei = $_POST["kenmei"];
138
-
139
- $message = $_POST["message"];
140
-
141
- }
142
-
143
-
144
-
145
- // 送信ボタンが押されたら
146
-
147
- if (isset($_POST["submit"])) {
148
-
149
- // 送信ボタンが押された時に動作する処理をここに記述する
150
-
151
-
152
-
153
- // 日本語をメールで送る場合のお決まり
154
-
155
- mb_language("ja");
156
-
157
- mb_internal_encoding("UTF-8");
158
-
159
-
160
-
161
- // 件名を変数subjectに格納
162
-
163
- $subject = "［自動送信］お問い合わせ内容の確認";
164
-
165
-
166
-
167
- // メール本文を変数bodyに格納
168
-
169
- $body = <<< EOM
170
-
171
- {$name}　様
172
-
173
-
174
-
175
- お問い合わせありがとうございます。
176
-
177
- 以下の内容が送信されました。
178
-
179
- =============================
180
-
181
- ■お名前：{$name}
182
-
183
- ■メールアドレス：{$email}
184
-
185
- ■件名：{$kenmei}
186
-
187
- ■お問い合わせ内容：
188
-
189
- {$message}
190
-
191
- ==============================
192
-
193
- 内容を確認の上、担当者から折り返しご連絡いたします。
194
-
195
- 今しばらくお待ちください。
196
-
197
- ※なお、こちらのメールアドレスは送信専用となっております。
198
-
199
- 　ご返信いただきましてもご返答はできかねますのでご了承ください。
200
-
201
-
202
-
203
- EOM;
204
-
205
-
206
-
207
- // 送信元のメールアドレスを変数fromEmailに格納
208
-
209
- $fromEmail = "メールアドレス@gmail.com";
210
-
211
-
212
-
213
- // 送信元の名前を変数fromNameに格納
214
-
215
- $fromName = "株式会社●●●";
216
-
217
-
218
-
219
- // ヘッダ情報を変数headerに格納する
220
-
221
- $header = "From: " .mb_encode_mimeheader($fromName) ."<{$fromEmail}>";
222
-
223
-
224
-
225
- // メール送信を行う
226
-
227
- mb_send_mail($email, $subject, $body, $header);
228
-
229
-
230
-
231
- // サンクスページに画面遷移させる
232
-
233
- header("Location: thanks.php");
234
-
235
- exit;
236
-
237
- }
238
-
239
- ?>
240
-
241
- <!DOCTYPE html>
242
-
243
- <html lang="ja">
244
-
245
- <head>
246
-
247
- ～中略～
248
-
249
- </head>
250
-
251
- <body>
252
-
253
- <form action="confirm.php" method="post">
254
-
255
- <input type="hidden" name="name" value="<?php echo he($name); ?>">
256
-
257
- <input type="hidden" name="email" value="<?php echo he($email); ?>">
258
-
259
- <input type="hidden" name="kenmei" value="<?php echo he($kenmei); ?>">
260
-
261
- <input type="hidden" name="message" value="<?php echo he($message); ?>">
262
-
263
- <p class="kakunin_title">お問い合わせ内容がよろしければ、「送信する」ボタンを押して下さい。</p>
264
-
265
- <div>
266
-
267
- <div><label>お名前</label><p><?php echo he($name); ?></p></div>
268
-
269
- <div><label>メールアドレス</label><p><?php echo he($email); ?></p></div>
270
-
271
- <div><label>件名</label><p><?php echo he($kenmei); ?></p></div>
272
-
273
- <div><label>お問い合わせ内容</label><p><?php echo nl2br(he($message)); ?></p></div>
274
-
275
- </div>
276
-
277
- <input class="syusei" type="button" value="内容を修正する" onclick="history.back(-1)">
278
-
279
- <button class="sousin" type="submit" name="submit">送信する</button>
280
-
281
- </form>
282
-
283
- ～中略～
284
-
285
- </body>
286
-
287
- </html>
288
-
289
- ```
290
-
291
-
292
-
293
- ### 試したこと
294
-
295
- 【バリデーションのPHP部分】
296
-
297
- $page_error = ""; // エラーメッセージ
298
-
299
- // エラーチェック
300
-
301
- if (isset($_POST["submit"])) {
302
-
303
- if ($email == "") {
304
-
305
- $page_error = "メールアドレスを入力してください\n";
306
-
307
- }
308
-
309
- if ($page_error == "") {
310
-
311
- if (!preg_match('/^([a-zA-Z0-9.\_\-+?\#\&\%])*@([a-zA-Z0-9\_\-])+([a-zA-Z0-9.\_\-]+)+$/', $email)) {
312
-
313
- $page_error = "メールアドレスを正しく入力してください\n";
314
-
315
- }
316
-
317
- }
318
-
319
- }
320
-
321
- 【HTMLで呼び出す部分】
315
+ **【HTMLで呼び出す部分】**
322
-
316
+
323
- <?php echo he($page_error); ?>
317
+ <span class="error_text"><?php echo he($page_error); ?></span>
324
-
325
- -----------------------------------------------------
318
+
319
+
326
320
 
327
321
  ↑といった内容を組み込みたいです。
328
322
 

2

「試したこと」の、文法の修正２

2019/10/12 09:30

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -292,30 +292,38 @@
292
292
 
293
293
  ### 試したこと
294
294
 
295
-
295
+ 【バリデーションのPHP部分】
296
+
297
+ $page_error = ""; // エラーメッセージ
298
+
299
+ // エラーチェック
300
+
301
+ if (isset($_POST["submit"])) {
302
+
303
+ if ($email == "") {
304
+
305
+ $page_error = "メールアドレスを入力してください\n";
306
+
307
+ }
308
+
309
+ if ($page_error == "") {
310
+
311
+ if (!preg_match('/^([a-zA-Z0-9.\_\-+?\#\&\%])*@([a-zA-Z0-9\_\-])+([a-zA-Z0-9.\_\-]+)+$/', $email)) {
312
+
313
+ $page_error = "メールアドレスを正しく入力してください\n";
314
+
315
+ }
316
+
317
+ }
318
+
319
+ }
320
+
321
+ 【HTMLで呼び出す部分】
322
+
323
+ <?php echo he($page_error); ?>
324
+
325
+ -----------------------------------------------------
326
+
327
+ ↑といった内容を組み込みたいです。
296
328
 
297
329
  ※Jquery Validation Pluginも試してみましたが動作しませんでした。
298
-
299
-
300
-
301
- // エラーチェック
302
-
303
- if ($email == "") {
304
-
305
- $email_error = "メールアドレスを入力してください\n";
306
-
307
- }
308
-
309
- if ($email_error == "") {
310
-
311
- if (!preg_match('/^([a-zA-Z0-9.\_\-+?\#\&\%])*@([a-zA-Z0-9\_\-])+([a-zA-Z0-9.\_\-]+)+$/', $email)) {
312
-
313
- $email_error = "メールアドレスを正しく入力してください\n";
314
-
315
- }
316
-
317
- }
318
-
319
- -----------------------------------------------------
320
-
321
- ↑といった内容を組み込みたいのですが、動作しませんでした。

1

「試したこと」の、文法の修正

2019/10/12 09:04

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -308,9 +308,9 @@
308
308
 
309
309
  if ($email_error == "") {
310
310
 
311
- if (!preg_match('/^([a-zA-Z0-9.\_\-+?\#\&\%])*@([a-zA-Z0-9\_\-])+([a-zA-Z0-9.\_\-]+)+$/', $request["email"])) {
311
+ if (!preg_match('/^([a-zA-Z0-9.\_\-+?\#\&\%])*@([a-zA-Z0-9\_\-])+([a-zA-Z0-9.\_\-]+)+$/', $email)) {
312
-
312
+
313
- $page_error = "メールアドレスを正しく入力してください\n";
313
+ $email_error = "メールアドレスを正しく入力してください\n";
314
314
 
315
315
  }
316
316