お問い合わせフォームを作ってみる -実装編②：入力内容のバリデーション-

こんにちは、ユアサです。
前回までの記事では、入力画面・確認画面・完了画面を作成しました。今回は、このシリーズで紹介したライブラリであるValitronを使ってバリデーション機能を実装していきます。

↓前々回の記事（使用するライブラリの紹介） tech.arms-soft.co.jp

前回作成したものの修正点

前回作成した入力画面・確認画面・完了画面ですが、一つのファイルで各画面の表示の制御をしようとしていましたが、input.php、confirm.php、complete.phpに分けました。

入力画面

入力画面に関しては特に大きい変更点はありません。この画面で入力した値を確認画面へ渡します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="sample.css">
    <title>お問い合わせフォーム 入力画面</title>
</head>
<body>
<div>
<h1>お問い合わせフォーム</h1>

<form method="post" action="confirm.php">
    <div>
        <label for="name">氏名</label>
        <input type="text" name="name" value="">
    </div>
    <div>
        <label for="email">メールアドレス</label>
        <input type="text" name="email" value="">
    </div>
    <div>
        <label for="contents">お問い合わせ内容</label>
        <select name="contents">
            <option value="">選択してください</option>
            <option value="contents1">内容①</option>
            <option value="contents2">内容②</option>
            <option value="contents3">内容③</option>
            <option value="contents4">内容④</option>
            <option value="contents5">内容⑤</option>
        </select>
    </div>
    <div>
        <label for="remarks">備考</label><br>
        <textarea rows="6" cols="100" name="remarks"></textarea>
    </div>
    <button type="submit" name="btn_confirm">入力内容を確認する</button>
</form>
</div>
</body>
</html>

確認画面

入力画面で入力した各項目の値を受け取り、Valitronで必須項目の値の有無やメールアドレス形式のバリデーションを実行できるようにしました。
各項目へのバリデーション内容を記述し、日本語で項目名を指定した後にバリデーションをします。エラーが無ければメッセージは特に表示はされませんが、バリデーションに引っかかった場合はエラー内容がそれぞれ改行されて表示されます。また、備考の入力項目だけ任意項目にしてみました。

<?php
require_once( 'vendor/autoload.php' );
Valitron\Validator::lang('ja');

// Valitronクラスを実行
$v = new Valitron\Validator($_POST);

// 入力必須の項目が記入されているか確認
// 入力項目のうち備考のみ任意項目にしてみる
$v->rule('required', 'name')->message('{field}を入力してください');
$v->rule('required', 'email')->message('{field}を入力してください');
$v->rule('required', 'contents')->message('{field}を入力してください');
// 入力された文字がメール形式かを確認
$v->rule('email', 'email')->message('{field}が正しい形式ではありません');
// 項目名を指定
$v->labels([
               'name' => '名前',
               'email' => 'メールアドレス',
               'contents' => 'お問い合わせ内容',
               'remarks' => '備考'
           ]);
// バリデーションを実行
if($v->validate()) {
    // 値の受け取り
    $name = htmlspecialchars($_POST['name']);
    $email = htmlspecialchars($_POST['email']);
    $contents = htmlspecialchars($_POST['contents']);
    $remarks = htmlspecialchars($_POST['remarks']);
} else {
    $errors = [];
    foreach ($v->errors() as $error) {
        foreach ($error as $value) {
            $errors[] =  $value;
        }
    }
}
// 完了画面へ値を送る
$_SESSION['form_data'] = $_POST;
?>

HTML部分はこんな感じに変更しました。

<?php

// 値の受け取り、Valitronの設定

?>

<!DOCTYPE>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>お問い合わせフォーム 確認画面</title>
    <link rel="stylesheet" href="sample.css">
</head>
<body>
<?php if (empty($errors)) : ?>
    <div>
        <h1>お問い合わせフォーム</h1>
        <p>以下の内容でよろしければ「送信する」をクリックしてください。<br>
            内容を変更する場合は「戻る」をクリックして入力画面にお戻りください。</p>
        <form method="post" action="confirm.php">
            <div>
                <label for="name">氏名</label>
                <p><?php echo $name; ?></p>
            </div>
            <div>
                <label for="email">メールアドレス</label>
                <p><?php echo $email; ?></p>
            </div>
            <div>
                <label for="contents">お問い合わせ内容</label>
                <p><?php echo $contents; ?></p>
            </div>
            <div>
                <label for="remarks">備考</label><br>
                <p><?php echo $remarks; ?></p>
            </div>
        </form>
        <form action="input.php" method="get">
            <button type="submit">戻る</button>
        </form>
        <form action="complete.php" method="post">
            <button type="submit" class="btn btn-success">送信する</button>
        </form>
    </div>
<?php else : ?>
    <?php foreach($errors as $value): ?>
        <?php echo $value; ?><br />
    <?php endforeach; ?>
<?php endif; ?>
</body>
</html>