最終更新日:
公開日:
ワークショップ
お問い合わせフォームを作る(7)
入力項目に合わせた様々なバリデーション
フォームを作成するシリーズ記事の第7段。Webサイトにとって必要不可欠なフォームについて、基本的な仕組みから実践的な機能の実装方法まで、「お問い合わせフォーム」の作成を題材にして解説していきます。
この記事のポイント
- メールアドレスの入力値チェックを実装する
- 性別や年齢など選択式フォームの入力値チェックを実装する
目次
入力項目に合わせたバリデーションを用意する
前回の「入力値のバリデーション」では、フォームの必須項目がちゃんと入力されているか確認するバリデーションを実装しました。
今回はさらに、メールアドレスや性別などの項目別に、それぞれの入力値が正しいかを確認するバリデーションを追加していきます。
今回のバリデーションを実装することで、入力してほしい項目が想定された入力値で入力されているかを自動的に確認できるようになり、誤った入力を防ぐことができるようになります。
入力項目ごとに必要なバリデーションを確認
現在のお問い合わせフォームには6つの入力項目があります。入力される値もそれぞれ異なるので、バリデーションもそれぞれに合わせて用意する必要があります。
- 氏名 – 未入力チェック、文字の長さチェック
- メールアドレス – 未入力チェック、形式チェック
- 性別 – 未入力チェック、形式チェック
- 年齢 – 未入力チェック、形式チェック
- お問い合わせ内容 – 未入力チェック
- プライバシーポリシーに同意 – 未入力チェック、形式チェック
「未入力チェック」は前回までに実装したので、今回はそれ以外のバリデーションを実装します。
使用するコードは前回までに作成したものを使うことを前提としています。
前回のページ:vol.6 入力値のバリデーション
前回作成したコードはこちら:vol.6のサンプルコード – GitHub
実装するコードを紹介
今回はバリデーションの追加のみなので、validation関数を変更します。
index.phpに新しいバリデーションを追記していきます。
Note
赤い箇所は追加するコードを、オレンジの箇所は修正しているコードを示します。
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[] = "「年齢」は必ず入力してください。";
}
「年齢」の入力値は次の6パターンです。
- 〜19歳 -> 1
- 20歳〜29歳 -> 2
- 30歳〜39歳 -> 3
- 40歳〜49歳 -> 4
- 50歳〜59歳 -> 5
- 60歳〜 -> 6
そのため、value属性の値が1より小さい(0以下)、または6より大きい(7以上)の場合にエラーと判断しています。
チェックボックスがチェックされているかを調べる
「プライバシーポリシーへの同意」は「性別」と同様に入力値が限られているため、同じ方法で入力値をチェックすることができます。
// プライバシーポリシー同意のバリデーション
if( empty($data['agreement']) ) {
$error[] = "プライバシーポリシーをご確認ください。";
} elseif( (int)$data['agreement'] !== 1 ) {
$error[] = "プライバシーポリシーをご確認ください。";
}
もしチェックボックスがチェックされていたら必ず「1」となるため、それ以外の値の場合はエラーと判断しています。
以上、項目ごとに異なるバリデーションを実装しました。
次回はフォームにファイルのアップロード機能を実装します。
今回作成したコードはこちら:vol.7のサンプルコード – GitHub
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
記事一覧
- お問い合わせフォームを作る (イントロダクション) お問い合わせフォームを作る
- お問い合わせフォームを作る(1) お問い合わせフォームの入力ページを作成する
- お問い合わせフォームを作る(2) フォームの確認ページ&完了ページを作成
- お問い合わせフォームを作る(3) 自動返信メールの実装
- お問い合わせフォームを作る(4) 入力値の引き継ぎ
- お問い合わせフォームを作る(5) 入力値のサニタイズ
- お問い合わせフォームを作る(6) 入力値のバリデーション
- お問い合わせフォームを作る(7) 入力項目に合わせた様々なバリデーション
- お問い合わせフォームを作る(8) フォームにファイルアップロード機能をつける
- お問い合わせフォームを作る(9) アップロードしたファイルをメールに添付する
- お問い合わせフォームを作る(10) セッションでフォームの多重送信を防ぐ
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。