【 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. 『 MW WP Form 』でフォームの作成と一般的な入力チェックを設定

まず WordPress の管理画面でフォームを作成します。

今回はフォームの作成の仕方については省略して、入力チェックの設定方法から説明します。

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

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

上記の画像は＜メールアドレス＞に対して入力必須のチェックとメールアドレスの形式チェックを設定しています。

「バリデーションを適用する項目」に入力項目の name 属性の値を入力して、バリデーションルールのチェックボックスを選ぶだけで、とても簡単です。

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

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

3. 『 MW WP Form 』のバリデーションルールの追加

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

その流れを見ていきましょう。

3.1 フォーム ID の確認

functions.php を編集する前に、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 』の公式マニュアルに一覧が掲載されていますので、そちらをご覧ください。

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 】『 MW WP Form 』 入力欄の複合条件でエラーを表示する方法

目次