(cache)【WordPress】WordPress『MW WP Form』入力欄の複合条件でエラーを表示する方法

はじめに

WordPressでサイトにお問い合わせやお申し込みのフォームを設置するときによく使われるプラグインに『MW WP Form』があります。

『MW WP Form』は送信前確認の画面を表示する機能や管理者にメールを送る機能などが標準で備わっている、とても便利なプラグインです。
リファレンスが日本語で書かれているため利用者が多く、国内では『Contact Form 7』の次にメジャーなプラグインです。

このように便利な『MW WP Form』ですが、複数の入力項目を組み合わせて入力チェックを行う機能が備わっていないのが欠点です。
複雑なフォームを作る場合に複合条件での入力チェックができないのは困りますよね。
そこで今回は、テーマのfunctions.phpファイルにバリデーションルールを書き加えるだけで『MW WP Form』で複合条件での入力チェックが実現できる方法についてご説明いたします。

1. 複合条件での入力チェックとは

入力チェックとは、フォームの入力項目（テキストボックス、セレクトボックス、ラジオボタンなど）に対して値が入っているか、入力した形式が正しいか、文字の長さが適切かなどを送信前にチェックして、誤りがあればエラーメッセージを出力して再入力を促す機能です。
そして、ある項目の入力（選択）内容に合わせて別の項目のチェックルールが変わるのが複合条件での入力チェックです。

複合条件での入力チェックが必要になるのは、例えば以下のようなケースです。

・　連絡先を入力するフォームで、「お電話」が選択された場合は＜電話番号＞が入力必須で、「メール」が選択された場合は＜電話番号＞は必須ではない。

『MW WP Form』は標準でさまざまなバリデーションルールが用意されていて、管理画面で入力項目ごとにどのルールを適用するか選択するだけで入力チェックの機能を実装することができます。
ただし、複数の入力項目をまたがったチェックは管理画面から設定することができませんので、オリジナルのバリデーションルールをPHPファイルに追加する必要があります。

2. フォームの作成と一般的な入力チェックの設定

まずWordPressの管理画面でフォームを作成します。
今回はフォームの作成の仕方については省略して、入力チェックの設定方法からご説明いたします。

このフォームの＜お名前＞＜連絡方法＞＜メールアドレス＞が入力必須項目で、＜電話番号＞は＜連絡方法＞が「お電話」の場合のみ入力必須項目にしたいとします。

まずは＜お名前＞＜連絡先＞＜メールアドレス＞の必須チェックの設定を行います。

上記の画像は＜メールアドレス＞に対して入力必須のチェックとメールアドレスの形式チェックを設定しています。
「バリデーションを適用する項目」に入力項目のname属性の値を入力して、バリデーションルールのチェックボックスを選ぶだけで、とても簡単です。

ラジオボタンの場合は「必須項目（チェックボックス）」を選択してください。

これで複合条件以外の入力チェックの準備ができました。

3. バリデーションルールの追加

3.1 フォームIDの確認

ここからはテーマのfunctions.phpを編集して、2.で作成した入力フォームに新しいバリデーションルールを追加します。

その前に、2.で作成したフォームのIDを取得する必要があります。
IDは編集画面の「フォーム識別子」に記載されていますので、追加作業を始める前に確認してください。

3.2 functions.phpの編集

テーマファイルのfunctions.phpにオリジナルのバリデーションルール my_required_phoneを作成します。

作成したバリデーションルールを『MW WP Form』のフィルターフックに追加(add_filter)することで、入力チェックの実行時に合わせて実行されます。

functions.php

function my_required_phone( $validation, $data ) {
  $method = $data['method'];
  if( isset( $method ) && $method === 'お電話' ) {
    $validation->set_rule( 'phone', 'noEmpty', array( 'message' => '連絡方法に「お電話」を選択した場合、電話番号は必須です。') );
  }
  return $Validation;
}
 
add_filter( 'mwform_validation_mw-wp-form-9940', 'my_required_phone', 10, 2 );

$dataの中に入力された値が配列で入ってきますので、追加する入力チェックに使う値を取得します。
今回の場合は＜連絡方法＞のチェックした項目をもとに入力チェックを追加しますので、＜連絡方法＞のname属性（=”method”）を指定して値を取り出します。

新しいバリデーションルールの追加は$validation->set_ruleで行います。
$validationには管理画面で設定した標準のバリデーションルールがすでに格納されていますので、それにset_ruleでオリジナルのバリデーションルールを追加します。

set_ruleの第一引数にはチェックを行う入力項目のname属性を、第二引数にはルールを文字列で指定してください。ルールは『MW WP Form』の公式マニュアルに一覧が掲載されていますので、そちらをご覧ください。

https://plugins.2inc.org/mw-wp-form/manual/validation-rule/

set_ruleの第三引数には表示するエラーメッセージを指定します。

最後に作成したオリジナルのバリデーションルール my_required_phoneをフィルターフックに追加します。
追加するフィルターはmwform_validation_mw-wp-formですが、ここで気をつけなければいけないのは、フィルター名の最後に3.1で確認したフォームのIDを足す必要があるということです。

つまり、フォームのIDが「9940」ならフィルター名はmwform_validation_mw-wp-form-9940となります。

すべての追加が終わりましたら、functions.phpを保存して画面上から複合条件での入力チェックが正しく機能しているか確認してみましょう。

4. 最後に

今回は『MW WP Form』を使って複数の入力項目をまたがったチェックを実装する方法をご紹介いたしました。オリジナルのバリデーションルールの追加は『MW WP Form』のカスタマイズの中でもPHPファイルを編集する必要があるため少しとっつきにくいですが、需要は多いのでぜひ覚えて使いこなしてみてください。

【WordPress】WordPress『MW WP Form』 入力欄の複合条件でエラーを表示する方法