PHPでサーバーサイドのフォームバリデーションを実装する
最終更新日: Update!!
過去記事「jQueryで作成するフォームバリデーション」ではjavascriptを使ったクライアントサイドのフォームバリデーションを紹介しましたが、この形ですとソースコードの書き換えがあったり、そもそもjavascriptがオフになっている場合は使えなくなってしまいます。そこでサーバーサイドでもしっかりとバリデーションを行うことが大切です。
今回はメールフォームにサーバーサイドバリデーションを実装していきたいと思います。使用するフォームですがこれまでにPHPでコンタクトフォームを作成する記事で紹介したものをベースに進めていきます。過去記事にありますので下記をご参考に。
【関連記事】
「PHPで自動返信メール機能付きのコンタクトフォームを作成する(入力画面)」
「PHPで自動返信メール機能付きのコンタクトフォームを作成する(確認画面) 」
「PHPで自動返信メール機能付きのコンタクトフォームを作成する(送信画面) 」
「jQueryで作成するフォームバリデーション」
これでサーバーサイドでもフォームのバリデーションができるようになりました。フォームのバリデーションにはクライアントサイドかサーバーサイドのどちらで行うかという議論もありますが、両方しておくことが一番安心なので是非試してみてはいかがでしょうか。 【関連記事】 「PHPで自動返信メール機能付きのコンタクトフォームを作成する(入力画面)」 「PHPで自動返信メール機能付きのコンタクトフォームを作成する(確認画面) 」 「PHPで自動返信メール機能付きのコンタクトフォームを作成する(送信画面) 」 「jQueryで作成するフォームバリデーション」 (参考にさせていただいたサイト様) 入力値のバリデーション
入力値を確認する関数を作成する
今回のメイン機能となる入力値確認(バリデーション)を行う関数を作成します。PHPのコンタクトフォームには「入力画面」「確認画面」「送信画面」の3つの構成に分かれますが、ここで作成する関数は「確認画面」に設置します。 ここではバリデーションの項目として、「必須入力」「メールアドレスのフォーマットチェック」「全角文字での入力チェック」を例としています。ここはフォームの機能要件によって適宜変更します。ではコードを見ていきます。 【check.php】※一部抜粋<?php //任意入力項目の配列が空の場合のエラーメッセージ制御 error_reporting(E_ALL ^ E_NOTICE); //サーバーサイドバリデーション $postData = $_POST; $isValidateError = true; $validateErrors = array(); function formValidation($postData) { //エラーメッセージ初期化 $validateErrors = array(); //必須項目チェック対象指定 $requiredCheck = array( '全角テキスト' => $postData['input_text'], 'カタカナ' => $postData['input_kana'], 'メールアドレス' => $postData['input_email'], '電話番号' => $postData['input_tel'], 'URL' => $postData['input_url'], '郵便番号' => $postData['input_zipcode'], 'ラジオボタン' => $postData['input_radio'], 'チェックボックス' => $postData['input_checkbox'], 'セレクトボックス' => $postData['input_selectbox'], '複数行テキスト' => $postData['input_textarea'] ); //全角文字チェック対象指定 $doubleByteCheck = array( '全角テキスト' => $postData['input_text'] ); //全角カタカナチェック対象指定 $doubleByteKanaCheck = array( 'カタカナ' => $postData['input_kana'] ); //メールアドレスフォーマットチェック対象指定 $emailFormatCheck = array( 'メールアドレス' => $postData['input_email'] ); //電話・FAX番号フォーマットチェック対象指定 $telFormatCheck = array( '電話番号' => $postData['input_tel'] ); //URLフォーマットチェック対象指定 $urlFormatCheck = array( 'URL' => $postData['input_url'] ); //郵便番号フォーマットチェック対象指定 $zipcodeFormatCheck = array( '郵便番号' => $postData['input_zipcode'] ); //必須項目バリデートチェック foreach ($requiredCheck as $key => $value) { if(empty($value)) { $validateErrors[] = $key.'の項目は必須入力です'; } } //全角文字バリデートチェック foreach ($doubleByteCheck as $key => $value) { if(!preg_match('/^[ぁ-んァ-ヶー一-龠 rnt]+$/',$value)) { $validateErrors[] = $key.'の項目はすべて全角文字で入力してください'; } } //全角カタカナ文字バリデートチェック foreach ($doubleByteKanaCheck as $key => $value) { if(!preg_match('/^[ア-ン゛゜ァ-ォャ-ョー「」、]+$/',$value)) { $validateErrors[] = $key.'の項目はすべて全角カタカナで入力してください'; } } //メールアドレスバリデートチェック foreach ($emailFormatCheck as $key => $value) { if(!preg_match('/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/',$value)) { $validateErrors[] = $key.'を正しく入力してください'; } } //電話番号バリデートチェック foreach ($telFormatCheck as $key => $value) { if(!preg_match('/^[0-9]{2,4}-[0-9]{2,4}-[0-9]{3,4}$/',$value)) { $validateErrors[] = $key.'を正しく入力してください'; } } //URLバリデートチェック foreach ($urlFormatCheck as $key => $value) { if(!preg_match('/http(s)?://([w-]+.)+[w-]+(/[w-./?%&=]*)?/',$value)) { $validateErrors[] = $key.'を正しく入力してください'; } } //郵便番号バリデートチェック foreach ($zipcodeFormatCheck as $key => $value) { if(!preg_match('/^d{3}[-]d{4}$|^d{7}$/',$value)) { $validateErrors[] = $key.'を正しく入力してください'; } } return $validateErrors; } $validateErrors = formValidation($postData); if(empty($validateErrors)) { $isValidateError = false; } else { $isValidateError = true; } ?>まず、グローバル変数である$_POSTは関数内で使えないため、適宜変数に代入します。次にエラーの有無を判定するフラグとして変数を用意し初期値をリセットしておきます。またエラーメッセージが入る変数も内容をリセットしておきます。今回は必須入力、全角文字、全角カタカナ、メールアドレス、電話番号、URL、郵便番号のバリデーションを例にあげています。 それぞれPOSTで持ってきたデータを、フォーマットチェック用の配列に格納していきます。この配列をバリデーション用の関数に入れてチェックしていく形となります。複数の項目が対象とできるように配列の形で持たせておきます。続けて、これら変数に入った配列をforeachでバリデーションチェックをしていきます。関数内ではpreg_match()では引数にそれぞれの入力フォーマットに合う正規表現を入れます。(詳しくはこちらの記事「フォームバリデーションで使える正規表現まとめ」をご覧ください)!マークを入れることで否定を示しますので、正規表現にマッチしないという条件を指定します。 この関数では、最終的にエラーメッセージを返す形となり、エラーの発生した数だけ配列として格納されるようになります。そして、最後にエラーメッセージの値を確認し、empty()で中身が空かどうかをチェックします。空でなければエラーメッセージをHTML上に表示させる形になります。このようにしてエラーの有無をチェックしていきます。
入力内容確認画面にエラーメッセージを表示させる
入力内容画面では、エラーがあった場合にエラーメッセージを表示させます。エラーが無い場合は何も表示させないようにします。デザインに合わせて適宜エラーメッセージを表示させる箇所に下記のコードでエラーメッセージのHTMLを用意します。 【check.php】※一部抜粋<?php if($isValidateError): ?> <ul> <?php foreach ($validateErrors as $value): ?> <li> <?php echo htmlspecialchars($value, ENT_QUOTES, 'UTF-8'); ?> </li> <?php endforeach; ?> </ul> <?php endif; ?>条件の判別には先ほど指定したエラーの有無を判定するフラグの値で分岐させます。エラーがある場合のみ以下に続くHTMLが出力されます。エラーは配列としてそれぞれ入っていますので、foreach文でループさせます。エラーが存在する項目がそのまま出力されます。あとはCSSなどで警告とわかるようなデザインに整えていきます。
エラーが無い場合のみ送信ボタンを表示させる
エラーがある状態で送信されてしまってはこれまで用意したものも意味がありません。確認画面に表示されている送信ボタンをエラー有無の判定で出力させるかどうかを指定します。エラーが無い場合のみ以下のように送信ボタンを出力させるようにします。 【check.php】※一部抜粋<?php if(!$isValidateError): ?> <input type="submit" value="送信する"> <?php endif; ?>
これでサーバーサイドでもフォームのバリデーションができるようになりました。フォームのバリデーションにはクライアントサイドかサーバーサイドのどちらで行うかという議論もありますが、両方しておくことが一番安心なので是非試してみてはいかがでしょうか。 【関連記事】 「PHPで自動返信メール機能付きのコンタクトフォームを作成する(入力画面)」 「PHPで自動返信メール機能付きのコンタクトフォームを作成する(確認画面) 」 「PHPで自動返信メール機能付きのコンタクトフォームを作成する(送信画面) 」 「jQueryで作成するフォームバリデーション」 (参考にさせていただいたサイト様) 入力値のバリデーション
sponserd
keyword search
recent posts
- レスポンシブ対応のインラインSVGを作成する
レスポンシブ対応のインラインSVGを作成する
- webpackで画像ファイルをバンドルしてCSSで読み込む画像をBase64エンコードする
webpackで画像ファイルをバンドルしてCSSで読み込む画像をBase64エンコードする
- メディアクエリを使わないレスポンシブコーディングを試してみる #3:コンテナクエリ
メディアクエリを使わないレスポンシブコーディングを試してみる #3:コンテナクエリ
- Vue.jsでStripe決済処理用のコンポーネントを作成する
Vue.jsでStripe決済処理用のコンポーネントを作成する
- GSAPのアニメーション進捗値取得とコントロールで円形のプログレスバーを作成する
GSAPのアニメーション進捗値取得とコントロールで円形のプログレスバーを作成する
- JavaScriptで再帰関数を使ってネストした配列の深さを調べる
JavaScriptで再帰関数を使ってネストした配列の深さを調べる
- MakeShopのクリエイターモードでオリジナルデザインのECサイトを構築するときに使えるコード集
MakeShopのクリエイターモードでオリジナルデザインのECサイトを構築するときに使えるコード集
- GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる#3:スクロールで固定表示
GSAPでScrollTriggerプラグインを使ってスクロールに対応したアニメーションを実装してみる#3:スクロールで固定表示
categories