ワークショップ
フォームを作る vol.6
入力値のバリデーション
フォームを作成するシリーズ記事の第6段。Webサイトにとって必要不可欠なフォームについて、基本的な仕組みから実践的な機能の実装方法まで、「お問い合わせフォーム」の作成を題材にして解説していきます。
この記事のポイント
- 入力値がちゃんと入力されているか確認する
- 入力値エラーの時にエラーメッセージを表示する
目次
概要
前回は、フォームに入力された値をサニタイズ(無害化)機能を実装しました。
今回は、フォームに入力された値を自動的に確認する「バリデーション」を実装していきます。
入力値のバリデーション機能があると、フォームに入力してほしい項目が正しい形式で入力されているを確認することができます。
例えば、必須項目への未入力がないか、「性別」や「年齢」などが正しい形式で選択されているかなどを確認し、入力ミスを未然に防ぐことができるようになります。
入力項目ごとに必要なバリデーションを確認
現在のお問い合わせフォームは6つの入力項目があります。
入力される値もそれぞれ異なるので、バリデーションもそれぞれに合わせて用意する必要があります。
- 氏名 – 未入力チェック、文字の長さチェック
- メールアドレス – 未入力チェック、形式チェック
- 性別 – 未入力チェック、形式チェック
- 年齢 – 未入力チェック、形式チェック
- お問い合わせ内容 – 未入力チェック
- プライバシーポリシーに同意 – 未入力チェック、形式チェック
「未入力チェック」は全項目に用意します。
今回は、この未入力チェックのみを実装していきましょう。
その他のバリデーションは次回実装します。
使用するコードは前回までに作成したものを使うことを前提としています。
前回のページ：vol.5 自動返信メールの実装
前回作成したコードはこちら：vol.5のサンプルコード – GitHub
未入力チェックを実装
まずは「氏名」にのみ、未入力チェックのバリデーションを実装していきます。
index.phpにコードを追加します。
Note
赤い箇所は追加するコードを、オレンジの箇所は修正しているコードを示します。
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;
}メッセージ内容のみ変更していますが、未入力チェックの部分は全て同じ処理になります。
エラーメッセージの表示例
以上で未入力チェックのバリデーションは実装完了です。
次回は、入力項目ごとに異なるバリデーションを追加していきます。
今回作成したコードはこちら：vol.6のサンプルコード – GitHub
一覧