ベストプラクティス
フォームを作る vol.7
入力項目に合わせた様々なバリデーション
フォームを作成するシリーズ記事の第7段。Webサイトにとって必要不可欠なフォームについて、基本的な仕組みから実践的な機能の実装方法まで、「お問い合わせフォーム」の作成を題材にして解説していきます。
目次
入力項目に合わせたバリデーションを用意する
前回の「入力値のバリデーション」では、フォームの必須項目がちゃんと入力されているか確認するバリデーションを実装しました。
今回はさらに、メールアドレスや性別などの項目別に、それぞれの入力値が正しいかを確認するバリデーションを追加していきます。
前回までに作成したコードを元に新しくバリデーションを追加していきます。
ファイルはこちらからダウンロードできます：ダウンロード(約2.8KB)
今回のバリデーションを実装することで、入力してほしい項目が想定された入力値で入力されているかを自動的に確認できるようになり、誤った入力を防ぐことができるようになります。
入力項目ごとに必要なバリデーションを確認
現在のお問い合わせフォームには6つの入力項目があります。入力される値もそれぞれ異なるので、バリデーションもそれぞれに合わせて用意する必要があります。
- 氏名 – 未入力チェック、文字の長さチェック
- メールアドレス – 未入力チェック、形式チェック
- 性別 – 未入力チェック、形式チェック
- 年齢 – 未入力チェック、形式チェック
- お問い合わせ内容 – 未入力チェック
- プライバシーポリシーに同意 – 未入力チェック、形式チェック
「未入力チェック」は前回までに実装したので、今回はそれ以外のバリデーションを実装します。
実装するコードを紹介
今回はバリデーションの追加のみなので、validation関数を変更します。
赤い箇所が新しいバリデーションのコードです。
index.php
function validation($data) {
$error = array();
// 氏名のバリデーション
if( empty($data['your_name']) ) {
$error[] = "「氏名」は必ず入力してください。";
} elseif( 20 < mb_strlen($data['your_name']) ) {
$error[] = "「氏名」は20文字以内で入力してください。";
}
// メールアドレスのバリデーション
if( empty($data['email']) ) {
$error[] = "「メールアドレス」は必ず入力してください。";
} elseif( !preg_match( '/^[0-9a-z_.\/?-]+@([0-9a-z-]+\.)+[0-9a-z-]+$/', $data['email']) ) {
$error[] = "「メールアドレス」は正しい形式で入力してください。";
}
// 性別のバリデーション
if( empty($data['gender']) ) {
$error[] = "「性別」は必ず入力してください。";
} elseif( $data['gender'] !== 'male' && $data['gender'] !== 'female' ) {
$error[] = "「性別」は必ず入力してください。";
}
// 年齢のバリデーション
if( empty($data['age']) ) {
$error[] = "「年齢」は必ず入力してください。";
} elseif( (int)$data['age'] < 1 || 6 < (int)$data['age'] ) {
$error[] = "「年齢」は必ず入力してください。";
}
// お問い合わせ内容のバリデーション
if( empty($data['contact']) ) {
$error[] = "「お問い合わせ内容」は必ず入力してください。";
}
// プライバシーポリシー同意のバリデーション
if( empty($data['agreement']) ) {
$error[] = "プライバシーポリシーをご確認ください。";
} elseif( (int)$data['agreement'] !== 1 ) {
$error[] = "プライバシーポリシーをご確認ください。";
}
return $error;
}上から順に確認していきましょう。
入力値の長さ（文字数）を調べる
「氏名」では、入力された文字の長さを調べるバリデーションを追加しています。
// 氏名のバリデーション
if( empty($data['your_name']) ) {
$error[] = "「氏名」は必ず入力してください。";
} elseif( 20 < mb_strlen($data['your_name']) ) {
$error[] = "「氏名」は20文字以内で入力してください。";
}elseif文の中にあるmb_strlen関数は、引数で渡した文字列の長さを返します。
マルチバイトに対応しているため、日本語のような文字列を調べるのに非常に便利な関数です。
今回は20文字以内の入力となるように、21文字以上の時にエラーとなるようにしています。
なお、今回は設定していませんが「お問い合わせ内容」に文字数の上限を設定したい場合も同じ方法で実装することができます。
メールアドレスの形式を調べる
「メールアドレス」は形式が妥当であるかを判定しています。
この形式のチェックでは「正規表現」を使っているため式が複雑です。
ここでは無理に正規表現の中身を理解しようとせず、こういうチェックが必要だというイメージだけしてください。
// メールアドレスのバリデーション
if( empty($data['email']) ) {
$error[] = "「メールアドレス」は必ず入力してください。";
} elseif( !preg_match( '/^[0-9a-z_.\/?-]+@([0-9a-z-]+\.)+[0-9a-z-]+$/', $data['email']) ) {
$error[] = "「メールアドレス」は正しい形式で入力してください。";
}例えば、メールアドレスには途中に「@」が入りますよね。
そしてその前後に英数字と一部の記号、そしてドメイン(gray-code.comなど)が続きます。
これらの形式をチェックしています。
特定の値が入力されているかを調べる
「性別」は入力値が2パターンに限られてます。
このように入力値を想定できる場合は、正しい値が入力されているか（または選択されているか）をチェックすることができます。
// 性別のバリデーション
if( empty($data['gender']) ) {
$error[] = "「性別」は必ず入力してください。";
} elseif( $data['gender'] !== 'male' && $data['gender'] !== 'female' ) {
$error[] = "「性別」は必ず入力してください。";
}今回のフォームでは「male(男性)」か「female(女性)」のいずれかが入力されている必要があるため、もしそれ以外の入力があった場合はエラーとしています。
特定の範囲の値が入力されているかを調べる
「年齢」も「性別」と同様に入力値が限られてます。
入力できる選択肢は多くなりますが、option要素の値は「1〜6」までです。そのため、入力値がその範囲の中に収まっているかをチェックしています。
// 年齢のバリデーション
if( empty($data['age']) ) {
$error[] = "「年齢」は必ず入力してください。";
} elseif( (int)$data['age'] < 1 || 6 < (int)$data['age'] ) {
$error[] = "「年齢」は必ず入力してください。";
}「1〜19歳」から「660歳〜」の6パターンのため、1より小さい（0以下)、または6より大きい(7以上)の場合にエラーと判断しています。
チェックボックスがチェックされているかを調べる
「プライバシーポリシーへの同意」は「性別」と同様に入力値が限られているため、同じ方法で入力値をチェックすることができます。
// プライバシーポリシー同意のバリデーション
if( empty($data['agreement']) ) {
$error[] = "プライバシーポリシーをご確認ください。";
} elseif( (int)$data['agreement'] !== 1 ) {
$error[] = "プライバシーポリシーをご確認ください。";
}もしチェックボックスがチェックされていたら必ず「1」となるため、それ以外の値の場合はエラーと判断しています。
以上、項目ごとに異なるバリデーションを実装しました。
次回はフォームにファイルのアップロード機能を実装します。
今回作成したファイル：ダウンロード(約2.9KB)
