入力値のバリデーション

概要

前回は、フォームに入力された値をサニタイズ(無害化)機能を実装しました。
今回は、フォームに入力された内容を確認する「バリデーション」という機能を実装していきます。

入力された内容を確認するバリデーション機能があると、フォームに入力してほしい項目がちゃんと入力されているか、または入力された内容にエラー（異常）がないかを確認することができます。
例えば、入力必須の項目に対して未入力がないかや、「性別」や「年齢」など選択式の項目において選択肢のいずれかが選択されているかを確認し、入力漏れやミスを未然に防ぐことができるようになります。

入力項目ごとに必要なバリデーションを確認

現在のお問い合わせフォームは6つの入力項目があります。
入力される値もそれぞれ異なるので、バリデーションもそれぞれに合わせて用意する必要があります。

今回のフォームは全ての項目が必須入力になっているので「未入力チェック」は全項目に用意します。
今回は、この未入力チェックを実装していきましょう。
その他の「形式チェック」については次回実装します。

使用するコードは前回までに作成したものを使うことを前提としています。
前回のページ：vol.5 自動返信メールの実装
前回作成したコードはこちら：vol.5のサンプルコード – GitHub

未入力チェックを実装する

まずは「氏名」の入力に対して未入力チェックのバリデーションを実装していきましょう。
index.phpを開いて、以下のコードを追加してください。

index.php

<?php
//var_dump($clean);

// 変数の初期化
$page_flag = 0;
$clean = array();
$error = array();

// サニタイズ
if( !empty($_POST) ) {
	foreach( $_POST as $key => $value ) {
		$clean[$key] = htmlspecialchars( $value, ENT_QUOTES);
	} 
}

if( !empty($clean['btn_confirm']) ) {

	$error = validation($clean);

	if( empty($error) ) {
		$page_flag = 1;
	}

} elseif( !empty($clean['btn_submit']) ) {

---- 省略 ----

	// 管理者へメール送信
	mb_send_mail( 'webmaster@gray-code.com', $admin_reply_subject, $admin_reply_text, $header);
}

function validation($data) {

	$error = array();

	// 氏名のバリデーション
	if( empty($data['your_name']) ) {
		$error[] = "「氏名」は必ず入力してください。";
	}

	return $error;
}
?>

---- 省略 ----

バリデーション用のvalidation関数を新しく用意し、この関数の返り値から入力にエラーがあったかを判断します。

今回実装する未入力チェックではempty関数を使って確認を行います。
もし入力が無い場合（未入力で値が空の場合)、配列$errorへエラーメッセージを追加しています。

そして以下の箇所で、変数$page_flagに数値を入れて次に表示するページを判断しています。

if( empty($error) ) {
	$page_flag = 1;
}

入力にエラーがない場合は$page_flagに「1」を設定して入力内容の確認ページを表示し、エラーがあった場合は初期値の「0」のままになってもう一度入力ページを表示します。

エラーメッセージを表示する

続いて、入力エラーがあった場合にエラーメッセージを表示するよう設定します。
入力ページのHTMLの箇所に以下のコードを追加してください。

index.php

---- 省略 ----

<?php else: ?>

<?php if( !empty($error) ): ?>
	<ul class="error_list">
	<?php foreach( $error as $value ): ?>
		<li><?php echo $value; ?></li>
	<?php endforeach; ?>
	</ul>
<?php endif; ?>

<form method="post" action="">
	<div class="element_wrap">
		<label>氏名</label>
		<input type="text" name="your_name" value="<?php if( !empty($clean['your_name']) ){ echo $clean['your_name']; } ?>">
	</div>

---- 省略 ----

あわせてスタイルも追加します。

index.php

---- 省略 ----

textarea[name=contact] {
	padding: 5px 10px;
	width: 60%;
	height: 100px;
	font-size: 86%;
	border: none;
	border-radius: 3px;
	background: #ddf0ff;
}

.error_list {
	padding: 10px 30px;
	color: #ff2e5a;
	font-size: 86%;
	text-align: left;
	border: 1px solid #ff2e5a;
	border-radius: 5px;
}
</style>

---- 省略 ----

入力エラーがあった場合は次のようなエラーメッセージが表示されるようになりました。

エラーメッセージを表示するコードもif文で$errorが空かを確認しています。
メッセージが入っていたら、1つずつ取り出してli要素で囲って出力する仕組みです。

全ての入力項目に未入力チェックを実装する

「氏名」と同じ手順で、それ以外の全ての入力項目へも未入力チェックのバリデーションを実装していきましょう。
validation関数に新しく以下のコードを追加してください。

index.php

function validation($data) {

	$error = array();

	// 氏名のバリデーション
	if( empty($data['your_name']) ) {
		$error[] = "「氏名」は必ず入力してください。";
	}

	// メールアドレスのバリデーション
	if( empty($data['email']) ) {
		$error[] = "「メールアドレス」は必ず入力してください。";
	}

	// 性別のバリデーション
	if( empty($data['gender']) ) {
		$error[] = "「性別」は必ず入力してください。";
	}

	// 年齢のバリデーション
	if( empty($data['age']) ) {
		$error[] = "「年齢」は必ず入力してください。";
	}

	// お問い合わせ内容のバリデーション
	if( empty($data['contact']) ) {
		$error[] = "「お問い合わせ内容」は必ず入力してください。";
	}

	// プライバシーポリシー同意のバリデーション
	if( empty($data['agreement']) ) {
		$error[] = "プライバシーポリシーをご確認ください。";
	}

	return $error;
}

メッセージ内容のみ変更していますが、if文を使った未入力チェックの仕組みは同じ内容です。

エラーメッセージの表示例

以上で未入力チェックのバリデーションは実装完了です。
次回は、入力項目ごとに異なるバリデーションを追加していきます。

今回作成したコードはこちら：vol.6のサンプルコード – GitHub