Webサイトのお問い合わせフォームにバリデーションをつけたい。

前提・実現したいこと

webサイトのお問い合わせフォームにバリデーションをつけたい。
フォームに入力(index.php)⇒「確認ページ」(confirm.php)⇒「サンクスページ」⇒投稿者に確認メールを自動送信する、という流れまでphpが正常に動作するのですが、
現在の設定だとバリデーションの部分のエラー表示が「確認ページ」に出るので、
（index.php）のフォーム入力欄の上にエラー表示を出したい。

該当のソースコード（フォームの入力ページ：index.php)

php
1<?php
2// htmlentitiesのショートカット関数
3function he($str){
4    return htmlentities($str, ENT_QUOTES, "UTF-8");
5}
6?>
7<!DOCTYPE html>
8<html lang="ja">
9<head></head>
10<body>
11～中略～
12<form class="form" id="form1" action="confirm.php" method="post" name="form" onsubmit="return validate()">
13<p class="name">
14<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input"  placeholder="お名前" value="<?php echo he($name); ?>" id="name" />
15</p>
16<p class="email">
17<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="メールアドレス" value="<?php echo he($email); ?>" />
18</p>
19<p class="kenmei">
20<input name="kenmei" type="text" class="validate[required,custom[onlyLetter]] feedback-input" id="kenmei"  name="kenmei" placeholder="件名" value="<?php echo he($kenmei); ?>" />
21</p>
22<p class="message">
23<textarea name="message" class="validate[required,length[6,300]] feedback-input" id="message" placeholder="本文"><?php echo he($message); ?></textarea>
24</p>
25<div class="submit"><button type="submit" id="button-blue">確認画面へ</button></div>
26</form>
27</body>
28</html>

当該のソースコード（入力内容の確認ページ：confirm.php）

php
1<?php
2// htmlentitiesのショートカット関数
3function he($str){
4    return htmlentities($str, ENT_QUOTES, "UTF-8");
5}
6
7$page_error = ""; // エラーメッセージ
8// エラーチェック
9if (isset($_POST["submit"])) {
10    if ($email == "") {
11        $page_error = "メールアドレスを入力してください\n";
12    }
13    if ($page_error == "") {
14        if (!preg_match('/^([a-zA-Z0-9.\_\-+?\#\&\%])*@([a-zA-Z0-9\_\-])+([a-zA-Z0-9.\_\-]+)+$/', $email)) {
15            $page_error = "メールアドレスを正しく入力してください\n";
16        }
17    }
18}
19
20    // フォームのボタンが押されたら
21    if ($_SERVER["REQUEST_METHOD"] == "POST") {
22        // フォームから送信されたデータを各変数に格納
23        $name = $_POST["name"];
24        $email = $_POST["email"];
25        $kenmei = $_POST["kenmei"];
26        $message  = $_POST["message"];
27    }
28
29    // 送信ボタンが押されたら
30    if (isset($_POST["submit"])) {
31        // 送信ボタンが押された時に動作する処理をここに記述する
32
33        // 日本語をメールで送る場合のお決まり
34        mb_language("ja");
35        mb_internal_encoding("UTF-8");
36
37       // 件名を変数subjectに格納
38        $subject = "［自動送信］お問い合わせ内容の確認";
39
40        // メール本文を変数bodyに格納
41        $body = <<< EOM
42{$name}　様
43
44お問い合わせありがとうございます。
45以下の内容が送信されました。
46=============================
47■お名前：{$name}
48■メールアドレス：{$email}
49■件名：{$kenmei}
50■お問い合わせ内容：
51{$message}
52==============================
53内容を確認の上、担当者から折り返しご連絡いたします。
54今しばらくお待ちください。
55※なお、こちらのメールアドレスは送信専用となっております。
56　ご返信いただきましてもご返答はできかねますのでご了承ください。
57
58EOM;
59
60        // 送信元のメールアドレスを変数fromEmailに格納
61        $fromEmail = "メールアドレス@gmail.com";
62
63        // 送信元の名前を変数fromNameに格納
64        $fromName = "株式会社●●●";
65
66        // ヘッダ情報を変数headerに格納する
67        $header = "From: " .mb_encode_mimeheader($fromName) ."<{$fromEmail}>";
68
69        // メール送信を行う
70        mb_send_mail($email, $subject, $body, $header);
71
72        // サンクスページに画面遷移させる
73        header("Location: thanks.php");
74        exit;
75    }
76?>
77<!DOCTYPE html>
78<html lang="ja">
79<head>
80～中略～
81</head>
82<body>
83<form action="confirm.php" method="post">
84<input type="hidden" name="name" value="<?php echo he($name); ?>">
85<input type="hidden" name="email" value="<?php echo he($email); ?>">
86<input type="hidden" name="kenmei" value="<?php echo he($kenmei); ?>">
87<input type="hidden" name="message" value="<?php echo he($message); ?>">
88<p class="kakunin_title">お問い合わせ内容がよろしければ、「送信する」ボタンを押して下さい。</p>
89<div>
90<div><label>お名前</label><p><?php echo he($name); ?></p></div>
91<div><label>メールアドレス</label><span class="error_text"><?php echo he($page_error); ?></span></div>
92<div><label>件名</label><p><?php echo he($kenmei); ?></p></div>
93<div><label>お問い合わせ内容</label><p><?php echo nl2br(he($message)); ?></p></div>
94</div>
95<input class="syusei" type="button" value="内容を修正する" onclick="history.back(-1)">
96<button class="sousin" type="submit" name="submit">送信する</button>
97</form>
98～中略～
99</body>
100</html>

試したこと

【バリデーションのPHP部分】
$page_error = ""; // エラーメッセージ
// エラーチェック
if (isset($_POST["submit"])) {
if ($email == "") {
$page_error = "メールアドレスを入力してください\n";
}
if ($page_error == "") {
if (!preg_match('/^([a-zA-Z0-9._-+?#&%])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/', $email)) {
$page_error = "メールアドレスを正しく入力してください\n";
}
}
}
【HTMLで呼び出す部分】
<span class="error_text"><?php echo he($page_error); ?></span>

↑といった内容を組み込みたいです。
※Jquery Validation Pluginも試してみましたが動作しませんでした。

行動規範の内容に同意します

回答1件

なにかのコピペなんですかね？
コードのレベルがチグハグです。
一度整理したほうが良いです。

バリデーションはどのフレームワークも実装しているので、そちらを覗いてみてはいかがですか？かなり勉強になります。
＊ついでに自身のコードとして取り込むと良いです。

質問からは離れますが、本コードですが、複数の宛先を登録することができます。
また、CSRF対策(というか連続投稿対策)も入れたほうが良いです。
あと、hidden で渡す場合は、渡した先でのバリデーションを忘れないでください。

問い合わせフォームは、初学者向けの教材としてはあまり適切ではないので、覚悟して取り掛かってください。普通に届きませんｗ

投稿2019/10/12 09:28

退会済みユーザー

総合スコア0

退会済みユーザー

2019/10/12 09:43

＞te2jiさまご回答ありがとうございますm(_ _)m はい、コピペで切り貼りしたため、困っており、やはり自身で整理した方が良いですね。。；あのあと色々いじり、メールアドレス部分のバリデーションは表示されるようになったのですが、「確認ページ」ではなく「index.php」の入力フォームのほうにエラー出力をしたく、作業中です。連投対策の件もご指摘ありがとうございます。フレームワークと併せて調べてみます。

行動規範の内容に同意します