0%

Programmingプログラミングナレッジ

Posted:2018.01.26

PHPでサーバーサイドのフォームバリデーションを実装する

過去記事「jQueryで作成するフォームバリデーション」ではjavascriptを使ったクライアントサイドのフォームバリデーションを紹介しましたが、この形ですとソースコードの書き換えがあったり、そもそもjavascriptがオフになっている場合は使えなくなってしまいます。そこでサーバーサイドでもしっかりとバリデーションを行うことが大切です。

 

今回はメールフォームにサーバーサイドバリデーションを実装していきたいと思います。使用するフォームですがこれまでにPHPでコンタクトフォームを作成する記事で紹介したものをベースに進めていきます。過去記事にありますので下記をご参考に。

 

【関連記事】
「PHPで自動返信メール機能付きのコンタクトフォームを作成する(入力画面)」
「PHPで自動返信メール機能付きのコンタクトフォームを作成する(確認画面) 」
「PHPで自動返信メール機能付きのコンタクトフォームを作成する(送信画面) 」
「jQueryで作成するフォームバリデーション」

 

入力値を確認する関数を作成する

今回のメイン機能となる入力値確認(バリデーション)を行う関数を作成します。PHPのコンタクトフォームには「入力画面」「確認画面」「送信画面」の3つの構成に分かれますが、ここで作成する関数は「確認画面」に設置します。

 

ここではバリデーションの項目として、「必須入力」「メールアドレスのフォーマットチェック」「全角文字での入力チェック」を例としています。ここはフォームの機能要件によって適宜変更します。ではコードを見ていきます。

【check.php】※一部抜粋

<?php
   $postData = $_POST;
   $page_flag = 0;
   $error = array();
   function formValidation($postData) {
     $error = array();
     if(empty($postData['names'])) {
       $error[] = "お名前を入力してください";
     } else if(!preg_match('/^[ぁ-んァ-ヶー一-龠  \r\n\t]+$/',$postData['names'])) {
       $error[] = "お名前は全角文字で入力してください";
     }
     if(empty($postData['email'])) {
       $error[] = "メールアドレスを入力してください";
     } else if(!preg_match('/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/',$postData['email'])) {
       $error[] = "メールアドレスを正しく入力してください";
     }
     if(empty($postData['messege'])) {
       $error[] = "お問い合わせ詳細を入力してください";
     }
     return $error;
   }
   $error = formValidation($postData);
   if(empty($postData['input-submit-check']) || !empty($error)) {
     $page_flag = 1;
   } else {
     $page_flag = 0;
   }
?>

 

まず、グローバル変数である$_POSTは関数内で使えないため、適宜変数に代入します。次にエラーの有無を判定するフラグとして変数を用意し初期値をリセットしておきます。またエラーメッセージが入る変数も内容をリセットしておきます。

 

次にバリデーションの関数を用意します。POSTされた配列の値を確認し、empty()で中身が空かどうかをチェックします。preg_match()では引数にそれぞれの入力フォーマットに合う正規表現を入れます。(詳しくはこちらの記事「フォームバリデーションで使える正規表現まとめ」をご覧ください)!マークを入れることで否定を示しますので、正規表現にマッチしないという条件を指定します。

 

エラーとなる条件の場合はエラー用の変数の配列に、エラーメッセージとなる文字列を入れます。そして最後にエラー変数を返すようにします。その上でエラー変数にバリデーション関数を代入しバリデーション機能を実行させます。

 

最後にエラーの有無を条件分岐にかけて、エラーの有無を判定するフラグを出します。上記の場合、「1」だとエラーがあり、「0」だとエラー無しの判定となります。ここでは条件として「入力内容確認のボタンが押された」と「全てのエラーが無い」のどちらかがマッチした場合を想定しています。

 

入力内容確認画面にエラーメッセージを表示させる

入力内容画面では、エラーがあった場合にエラーメッセージを表示させます。エラーが無い場合は何も表示させないようにします。デザインに合わせて適宜エラーメッセージを表示させる箇所に下記のコードでエラーメッセージのHTMLを用意します。

【check.php】※一部抜粋

<?php if($page_flag == 1): ?>
<ul>
  <?php foreach( $error as $value ): ?>
  <li><?php echo $value; ?>
  </li>
  <?php endforeach; ?>
</ul>
<?php endif; ?>

 

条件の判別には先ほど指定したエラーの有無を判定するフラグの値で分岐させます。エラーがある場合のみ以下に続くHTMLが出力されます。

 

エラーは配列としてそれぞれ入っていますので、foreach文でループさせます。エラーが存在する項目がそのまま出力されます。あとはCSSなどで警告とわかるようなデザインに整えていきます。

 

エラーが無い場合のみ送信ボタンを表示させる

エラーがある状態で送信されてしまってはこれまで用意したものも意味がありません。確認画面に表示されている送信ボタンをエラー有無の判定で出力させるかどうかを指定します。エラーが無い場合のみ以下のように送信ボタンを出力させるようにします。

【check.php】※一部抜粋

<?php
   if($page_flag == 0) {
     echo '<button type="submit" id="submit-send" name="submit-send">送信する</button>';
   }
?>

 


 

これでサーバーサイドでもフォームのバリデーションができるようになりました。フォームのバリデーションにはクライアントサイドかサーバーサイドのどちらで行うかという議論もありますが、両方しておくことが一番安心なので是非試してみてはいかがでしょうか。

 

 

【関連記事】
「PHPで自動返信メール機能付きのコンタクトフォームを作成する(入力画面)」
「PHPで自動返信メール機能付きのコンタクトフォームを作成する(確認画面) 」
「PHPで自動返信メール機能付きのコンタクトフォームを作成する(送信画面) 」
「jQueryで作成するフォームバリデーション」

 

(参考にさせていただいたサイト様)
入力値のバリデーション

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】