0%

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

Posted:2018.01.26

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

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

 

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

 

【関連記事】
「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('/^[ぁ-んァ-ヶー一-龠  \r\n\t]+$/',$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で作成するフォームバリデーション」

 

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

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

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

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

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

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

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

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

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

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

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

CAPTCHA


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