「MW WP Form」で全角数字に対応した「電話番号」バリデーションチェックの作り方

こんにちは、ヱビス(@evisu0414)です。

今日は、WordPressでお世話になることが多い、お問い合わせフォーム用プラグイン「MW WP Form」のバリデーションカスタマイズについて、ご紹介します。

「電話番号」バリデーションの問題点

「MW WP Form」では、電話番号のバリデーション(エラー)チェックが、標準で用意されています。

下記のように「電話番号」という項目にチェックを入れるだけで、簡単に電話番号のバリデーションチェックが、実装できます。

ですが、バリデーションチェックが通るパターンは下記の2パターンのみです。

■バリデーションが通るパターン

  • (1)「0312341234」の半角数字のみのパターン
  • (2)「03-1234-1234」の半角数字と半角ハイフンのパターン

これだけでも、十分なバリデーションチェックなのですが、クライアントの要望によっては下記のパターンに対しても対応する必要がある場合があります。

■追加でチェックしたいバリデーションパターン

  • (1)「0312341234」の全角数字のみのパターン
  • (2)「03−1234−1234」の全角数字と全角ハイフンのパターン

残念ながら、この2つのバリデーションチェックは初期設定では存在しないので、独自に用意する必要があります。

「MW WP Form」のコアファイルには触れない

カスタマイズということで、「MW WP Form」プラグインディレクトリにある「/classes/validation-rules/class.tel.php」を直接変更して、カスタマイズするという方法は行ってはいけません。

「MW WP Form」は定期的にバージョンアップされているプラグインです。

そのため、コアファイルを直接カスタマイズしたあとに、プラグインのバージョンアップを行うと、カスタマイズした内容ともども最新のバージョンに上書きされてしまいます。

そうなると、バージョンアップの都度、カスタマイズしないといけないという手間がかかり、運用コストが上がってしまいます。

プラグインのバージョンアップにも対応したカスタマイズ方法

カスタマイズを行う方法としては、各テーマフォルダにある「functions.php」ファイルにカスタマイズ内容を記述する方法で対応します。

まずは、公式でも掲載されているバリデーションカスタマイズ用のコードを確認します。

function my_validation_rule( $Validation, $data, $Data ) {
    $Validation->set_rule( '電話番号', 'tel', array( 'message' => 'それは電話番号ではない!' ) );
    return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-xxx', 'my_validation_rule', 10, 3 );

この記述で、エラーメッセージの内容をカスタマイズできます。

ですが、今回はエラーメッセージのカスタマイズではなく、バリデーションチェックのカスタマイズです。

ですが、「電話番号」のバリデーションに新しい条件を追加することはできません。

そのため、新しく「電話番号」のバリデーション条件を追加します。

ちなみに「mwform_validation_mw-wp-form-xxx」の「xxx」は、作成したフォームの「key」番号になりますので、ご注意ください。

「電話番号」のバリデーションチェックを作成してみます。

function my_validation_rule( $Validation, $data, $Data ) {
    if ( !empty($data['電話番号']) ) {
        if (!(
            preg_match("/^[0|0][0-9|0-9]{1}[-|−][0-9|0-9]{4}[-|−][0-9|0-9]{4}/u", $data['電話番号']) ||
            preg_match("/^[0|0][0-9|0-9]{2}[-|−][0-9|0-9]{3}[-|−][0-9|0-9]{4}/u", $data['電話番号']) ||
            preg_match("/^[0|0][0-9|0-9]{3}[-|−][0-9|0-9]{2}[-|−][0-9|0-9]{4}/u", $data['電話番号']) ||
            preg_match("/^[0|0][0-9|0-9]{4}[-|−][0-9|0-9]{1}[-|−][0-9|0-9]{4}/u", $data['電話番号']) ||
            preg_match("/^[0|0][0-9|0-9]{2}[-|−][0-9|0-9]{4}[-|−][0-9|0-9]{4}/u", $data['電話番号']) ||
            preg_match("/^[0-9|0-9]{10,11}$/u", $data['電話番号'] )
        )) {
            $Validation->set_rule( '電話番号', 'tel', array( 'message' => 'それは電話番号ではない!' ) );
        }
    }
    return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-xxx', 'my_validation_rule', 10, 3 );

このバリデーションチェックは「電話番号」が「必須」にはなっていません。

「必須」にする場合は「if ( !empty($data[‘電話番号’]) )」の部分を削除することで必須にできます。

次に、正規表現を見ていきましょう。

半角のみであれば「\d」で作成できますが、全角数字である「0-9」のチェックも必要となるため「0-9|0-9」としています。

また、ハイフンの部分は「あり」と「なし」があるので「[-|−]{0,1}」として、その両方に対応します。

そして、厄介なのが電話番号には、複数パターンが存在します。

■電話番号のパターン

  • ・0 + 市外局番1桁+市内局番4桁地域 + 加入者番号4桁)
  • ・0 + 市外局番2桁+市内局番3桁地域 + 加入者番号4桁)
  • ・0 + 市外局番3桁+市内局番2桁地域 + 加入者番号4桁)
  • ・0 + 市外局番4桁+市内局番1桁地域 + 加入者番号4桁)
  • ・11桁の携帯番号(ハイフンあり)
  • ・11桁の携帯番号(ハイフンなし)

【参考-総務省-】
http://www.soumu.go.jp/main_sosiki/joho_tsusin/top/tel_number/q_and_a.html#q2

このパターンに合わせて作成すると、上記のような正規表現になります。

これで、電話番号のバリデーションチェックとして実装することができます。

既存の「電話番号」バリデーションを切っておく

これで、「電話番号」のバリデーションチェックが動作するのですが、「MW WP Form」が用意している既存の「電話番号」バリデーションチェックが「ON」になっていると、正常に動作しません。

そのため、オリジナルのバリデーションチェックを作成したときは、「MW WP Form」既存のバリデーションチェックを外してください。

まとめ

クライアントからの要望は多種多様であり、WordPressのプラグインのみですべての条件をカバーすることは難しいと思います。

すこし、PHPやプラグインそのものの知識が必要となりますが、カスタマイズをして便利でかつアップデートに対応できる仕組みにすることができます。

WordPressカスタマイズのヒントになれば、幸いです。