MW WP Formのエラーメッセージの表示位置を変更する方法

MW WP Formのエラーメッセージの表示位置を変更する方法

MW WP Formのエラーメッセージの表示位置を変更する方法

MW WP Formで必須項目などのバリデーションルールを追加した際に、表示されるエラーメッセージの位置を変更する方法をご紹介いたします。

必須項目に値を入力せずに送信しようとすると、「未入力です。」といったエラーメッセージが表示されます。デフォルトでは、エラーメッセージは入力欄のすぐ後ろに出力されます。

エラーメッセージの表示位置を変更して見た目を調整したいというケースは結構あると思いますので、フォームプラグインにMW WP Formを採用することが多い方は、覚えておくと役立つと思います。

MW WP Formのエラーメッセージの表示位置を変更する方法

まず、フォームタグに「show_error=”false”」を追加して、エラーメッセージを規定の位置で表示しないようにします。これはフォームタグ追加時に「エラーを表示しない」にチェックを入れると追加されるパラメータです。

エラーを表示しない
[mwform_text name="name" size="60" show_error="false"]

続いて、エラーメッセージを表示させたい位置に「mwform_error」のフォームタグを追加します。keysで該当入力欄の”name”を指定します。フォームタグの追加時に「エラーメッセージ」を選択すればタグを作成できます。

[mwform_error keys="name"]

これで、エラーメッセージを任意の場所に出力させることができます。また、この方法を使えば、エラーメッセージを複数箇所に出力することも可能です。

複数入力欄のエラーメッセージを1箇所にまとめる方法

例えば、氏名の入力欄が姓名で分かれていたり、電話番号の入力欄がハイフン繋ぎで分かれている場合など、複数の入力欄を必須化したいケースもあると思います。それぞれの入力欄に必須項目のバリデーションルールを追加すると、両方が未入力だとエラーメッセージが2箇所に表示されてしまい、レイアウトが崩れることもあります。こんな感じですね↓

エラーメッセージが複数箇所に表示されて不格好

こういった場合は、上述した方法を応用して、エラーメッセージを1箇所にまとめて表示させることが可能です。

furigana_seiとfurigana_meiという2つの入力欄を例にすると、フォームタグは以下のようになります。「show_error=”false”」を追加して、「mwform_error」をエラーメッセージを表示させたい箇所に追記します。mwform_errorには複数の入力欄を指定可能なので、keysにはカンマ区切りでfurigana_seiとfurigana_meiを指定しています。

[mwform_text name="furigana_sei" size="20" show_error="false"]
[mwform_text name="furigana_mei" size="20" show_error="false"]
[mwform_error keys="furigana_sei,furigana_mei"]

ただ、通常通り管理画面でバリデーションルールを追加すると、両方が未入力の場合は2つエラーメッセージが表示されてしまいます。

エラーメッセージを1つにまとめるために、独自のバリデーションルールを追加します。適用しているテーマのfunctions.phpに以下のようなコードを記述しましょう。

function my_mwwpform_validation_rule($Validation, $data) {
  if (empty($data['furigana_sei'])) {
    $Validation->set_rule('furigana_sei', 'noEmpty', array('message' => '未入力です。'));
  } elseif (empty($data['furigana_mei'])) {
    $Validation->set_rule('furigana_mei', 'noEmpty', array('message' => '未入力です。'));
  }
  return $Validation;
}
add_filter('mwform_validation_mw-wp-form-xxx', 'my_mwwpform_validation_rule', 10, 2);

「mwform_validation_mw-wp-form-xxx」の”xxx”には、対象フォームのフォーム識別子のkey(数字)を入れてください。例えば、フォーム識別子が以下の場合は、「mwform_validation_mw-wp-form-123」とします。

[mwform_formkey key="123"]

これで、両方もしくはどちらか一方が未入力の場合に、エラーメッセージが1つ表示されます。管理画面側でバリデーションルールが追加されているとそちらが優先されてしまうので、functions.phpで制御したい場合は管理画面側のバリデーションルールは削除しましょう。

エラーメッセージが1つになってスッキリ

やっていることとしては、furigana_seiが空の場合はfurigana_seiに必須項目のバリデーションルールを、furigana_meiが空の場合はfurigana_meiに必須項目のバリデーションルールを追加してエラーメッセージを表示させています。

ちなみに、チェックボックスやラジオボタンで必須項目を設定したい場合は、以下のように記述します。

function my_mwwpform_validation_rule($Validation, $data) {
  if (empty($data['check']['data'])) {
    $Validation->set_rule('check', 'required', array('message' => '必須項目です。'));
  }
  return $Validation;
}
add_filter('mwform_validation_mw-wp-form-xxx', 'my_mwwpform_validation_rule', 10, 2);

あとがき

バリデーションルールの詳細については、公式マニュアルをご参照ください。

MW WP Formは使いやすいし、確認画面も簡単に実装できて便利です。カスタマイズ用にフックも豊富に用意されていて、かゆいところに手が届くフォームプラグインですね。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です