入力値のバリデーション

フォームを作成するシリーズ記事の第6段。Webサイトにとって必要不可欠なフォームについて、基本的な仕組みから実践的な機能の実装方法まで、「お問い合わせフォーム」の作成を題材にして解説していきます。

概要

前回は、フォームに入力された値をサニタイズ(無害化)機能を実装しました。

前回作成したファイルはこちら：ダウンロード(約2.5KB)

今回は、フォームに入力された値を自動的に確認する「バリデーション」を実装していきます。この機能があると、入力してほしい項目がちゃんと入力されているか、性別や年齢などが正しい形式で選択されているかなどを確認し、入力ミスを未然に防ぐことができるようになります。

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

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

氏名 – 未入力チェック、文字の長さチェック
メールアドレス – 未入力チェック、形式チェック
性別 – 未入力チェック、形式チェック
年齢 – 未入力チェック、形式チェック
お問い合わせ内容 – 未入力チェック
プライバシーポリシーに同意 – 未入力チェック、形式チェック

「未入力チェック」は全項目に用意します。今回は、この未入力チェックのみを実装していきましょう。その他のバリデーションは次回実装します。

未入力チェックを実装

まずは「氏名」にのみ、未入力チェックのバリデーションを実装していきます。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へエラーメッセージを追加。

確認ページの次の箇所で、次に表示するページを判断しています。

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

メッセージ内容のみ変更していますが、未入力チェックの部分は全て同じ処理になります。