最終更新日:
公開日:
ワークショップ
お問い合わせフォームを作る(7)
入力項目に合わせた様々なバリデーション
ワークショップ「お問い合わせフォームを作成する」の第7回目は、フォームの入力項目ごとに入力が妥当であるかを確認するバリデーションを実装します。
この記事のポイント
- フォームの入力項目ごとにあわせたバリデーションを実装する
- メールアドレスは正規表現を使って形式を確認する
- 性別や年齢など選択するタイプのフォームでは比較演算子を使って入力値をチェックする
目次
入力項目に合わせたバリデーションを用意する
前回の「入力値のバリデーション」では、フォームの必須項目がちゃんと入力されていることを確認するバリデーションを実装しました。
今回はメールアドレスや性別などの項目ごとに、それぞれ正しい入力がされているかを確認するバリデーションを追加していきます。
バリデーションの機能を追加することで、フォームへの入力が想定された形で入力されているかを確認できるようになり、誤った入力を防ぐことができるようになります。
入力項目ごとに必要なバリデーションを確認
現在のお問い合わせフォームには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) セッションでフォームの多重送信を防ぐ
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。