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

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

ただいまの
回答率

89.10%

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

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 357
退会済みユーザー

退会済みユーザー

前提・実現したいこと

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

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

<?php
// htmlentitiesのショートカット関数
function he($str){
    return htmlentities($str, ENT_QUOTES, "UTF-8");
}
?>
<!DOCTYPE html>
<html lang="ja">
<head></head>
<body>
~中略~
<form class="form" id="form1" action="confirm.php" method="post" name="form" onsubmit="return validate()">
<p class="name">
<input name="name" type="text" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input"  placeholder="お名前" value="<?php echo he($name); ?>" id="name" />
</p>
<p class="email">
<input name="email" type="text" class="validate[required,custom[email]] feedback-input" id="email" placeholder="メールアドレス" value="<?php echo he($email); ?>" />
</p>
<p class="kenmei">
<input name="kenmei" type="text" class="validate[required,custom[onlyLetter]] feedback-input" id="kenmei"  name="kenmei" placeholder="件名" value="<?php echo he($kenmei); ?>" />
</p>
<p class="message">
<textarea name="message" class="validate[required,length[6,300]] feedback-input" id="message" placeholder="本文"><?php echo he($message); ?></textarea>
</p>
<div class="submit"><button type="submit" id="button-blue">確認画面へ</button></div>
</form>
</body>
</html>

当該のソースコード(入力内容の確認ページ:confirm.php)

<?php
// htmlentitiesのショートカット関数
function he($str){
    return htmlentities($str, ENT_QUOTES, "UTF-8");
}

$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";
        }
    }
}

    // フォームのボタンが押されたら
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // フォームから送信されたデータを各変数に格納
        $name = $_POST["name"];
        $email = $_POST["email"];
        $kenmei = $_POST["kenmei"];
        $message  = $_POST["message"];
    }

    // 送信ボタンが押されたら
    if (isset($_POST["submit"])) {
        // 送信ボタンが押された時に動作する処理をここに記述する

        // 日本語をメールで送る場合のお決まり
        mb_language("ja");
        mb_internal_encoding("UTF-8");

       // 件名を変数subjectに格納
        $subject = "[自動送信]お問い合わせ内容の確認";

        // メール本文を変数bodyに格納
        $body = <<< EOM
{$name} 様

お問い合わせありがとうございます。
以下の内容が送信されました。
=============================
■お名前:{$name}
■メールアドレス:{$email}
■件名:{$kenmei}
■お問い合わせ内容:
{$message}
==============================
内容を確認の上、担当者から折り返しご連絡いたします。
今しばらくお待ちください。
※なお、こちらのメールアドレスは送信専用となっております。
 ご返信いただきましてもご返答はできかねますのでご了承ください。

EOM;

        // 送信元のメールアドレスを変数fromEmailに格納
        $fromEmail = "メールアドレス@gmail.com";

        // 送信元の名前を変数fromNameに格納
        $fromName = "株式会社●●●";

        // ヘッダ情報を変数headerに格納する
        $header = "From: " .mb_encode_mimeheader($fromName) ."<{$fromEmail}>";

        // メール送信を行う
        mb_send_mail($email, $subject, $body, $header);

        // サンクスページに画面遷移させる
        header("Location: thanks.php");
        exit;
    }
?>
<!DOCTYPE html>
<html lang="ja">
<head>
~中略~
</head>
<body>
<form action="confirm.php" method="post">
<input type="hidden" name="name" value="<?php echo he($name); ?>">
<input type="hidden" name="email" value="<?php echo he($email); ?>">
<input type="hidden" name="kenmei" value="<?php echo he($kenmei); ?>">
<input type="hidden" name="message" value="<?php echo he($message); ?>">
<p class="kakunin_title">お問い合わせ内容がよろしければ、「送信する」ボタンを押して下さい。</p>
<div>
<div><label>お名前</label><p><?php echo he($name); ?></p></div>
<div><label>メールアドレス</label><span class="error_text"><?php echo he($page_error); ?></span></div>
<div><label>件名</label><p><?php echo he($kenmei); ?></p></div>
<div><label>お問い合わせ内容</label><p><?php echo nl2br(he($message)); ?></p></div>
</div>
<input class="syusei" type="button" value="内容を修正する" onclick="history.back(-1)">
<button class="sousin" type="submit" name="submit">送信する</button>
</form>
~中略~
</body>
</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も試してみましたが動作しませんでした。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/12 18:43

    >te2jiさま
    ご回答ありがとうございますm(_ _)m
    はい、コピペで切り貼りしたため、困っており、やはり自身で整理した方が良いですね。。;

    あのあと色々いじり、メールアドレス部分のバリデーションは表示されるようになったのですが、
    「確認ページ」ではなく「index.php」の入力フォームのほうにエラー出力をしたく、
    作業中です。

    連投対策の件もご指摘ありがとうございます。
    フレームワークと併せて調べてみます。

    キャンセル

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

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる