MW WP Formは、いつもお世話になっているWordPressのフォームプラグインです。今回は、任意の場所にバリデーションのエラーメッセージを出す方法についてまとめました。
エラーメッセージを任意の場所に出す。これは、
デザイン上任意の場所にエラーを表示したい
チェック項目を分けてコーディングしたい
アラートをまとめて一か所に表示したい
といった場合に便利です。例として、チェック項目をカテゴライズしたフォームのサンプルを紹介しています。
基本的な使い方については、こちらの記事にまとめています。
確認画面やエラー画面、完了画面（サンクスページ）も遷移自由なフォームプラグインMW WP form
201705 MW WP Formの条件分岐についての記事を公開しました
選択した内容によって、テキストボックスを必須に切り替える方法についての記事です
MW WP Formで、チェック・ラジオの選択状態によって必須を切り替える方法
目次
MW WP Formのエラーメッセージを任意の場所に表示するサンプルフォーム
ラジオボタンを地域名ごとに分けて表示したフォームを用意しました。
地域選択1
・・・バリデーションのエラー表示を特に指定していません
地域選択2
・・・バリデーションのエラー表示場所を指定しています。
確認ボタンを押して、それぞれどこにアラートが表示されるか確認してみましょう。
MW WP Formのエラーメッセージを任意の場所に表示するサンプルフォーム
地域選択1では、せっかく見やすいように選択項目を分割したのに、エラーメッセージが複数か所に出てしまいます。しかし、地域選択2では、任意の場所（項目直下）に表示しています。
（サンプル画像です）
MW WP Formのエラーメッセージを任意の場所に表示する方法
では、MW WP formのコードがどうなっているか見てみましょう。（HTMLは省きますね）
地域選択2 *必須 [[mwform_error keys="地域選択2"]]
【関東】[[mwform_radio name="地域選択2" children="東京都,埼玉県" show_error="false"]]
【関西】[[mwform_radio name="地域選択2" children="大阪府,奈良県" show_error="false"]]
【東海】[[mwform_radio name="地域選択2" children="愛知県,静岡県" show_error="false"]]
[[mwform_confirmButton value="確認する"]]
まず、デフォルトのエラーを非表示にする。
そして、任意の場所にエラーメッセージを表示する。
という手順になっています。
そもそも、同じネーム属性のコードを分けて記載してもいいんだ！という驚き。（そんなことは出来ないと思い込んでいた）
そして、「エラーを表示しない」という選択がなんのためにあるのかもわかっていなかった自分。
通常のお問合せフォームだと、なかなかここまですることは少ないと思います。改めてフォームをカスタマイズしてみると、色々な発見があり、このフォームプラグインの懐の深さに驚かされます。
上記のようにコードを書くだけでもよいですが、MW WP Form編集画面から、コードを生成する場合は下記の手順となります。
1.ラジオボタンを選択し、「フォームタグを追加」ボタンを押す
チェックボックスなどでも、同じことが言えるでしょうね。
2.ポップアップで、「エラーを表示しない」にチェックし、insert
[[mwform_radio name=”地域選択2″ children=”東京都,埼玉県” show_error=”false”]]
show_error=”false” がコードに追加されています。読んで字の如く。
3.エラーメッセージを選択し、「フォームタグを追加」ボタンを押す
4.ポップアップで、name属性、今回は「地域選択2」を入力してinsert
生成されたコード、
[[mwform_error keys=”地域選択2″]]
を任意の場所に記載すれば、その部分にエラーメッセージが出てくるというわけです。
もちろん、バリデーションルールの設定もお忘れなく
これらの設定をした時に、忘れてはいけないのがバリデーションルールの設定ですね。
MW WP Formのエラーメッセージカスタマイズ まとめ
任意の場所にエラーメッセージを表示したときに、改行されて気になる・・・という場合もあるかもしれません。
これは、プラグインのデフォルトのCSSが影響しています。
.mw_wp_form .error {
font-size: 93%;
color: #B70000;
display: block;
}
これを回避したい場合は、任意のクラスでフォームを囲い、CSSを上書きしたりすると変更できます。
そんなことをしなくても、フォームにはIDが振り分けられるので、それを使うこともできますが、コードを流用することも考えると、任意のdivで囲んだ方が後々使いやすいかもしれませんね。
#mw_wp_form_mw-wp-form-2767 .error {
display: inline-block;
}
.sample-class .mw_wp_form .error {
display: inline-block;
}
MW WP Formは、国内産で確認画面・エラー画面を設定できる、大変便利なプラグインです。カスタマイズ性にも優れているので、様々な要件に応えることが出来るでしょう。
冒頭でも紹介しましたが、基本的な使い方も以前まとめているので参考にして下さいね。
確認画面やエラー画面、完了画面（サンクスページ）も遷移自由なフォームプラグインMW WP form
※といっても、結構前のエントリーなので、なにか気になる点があったら気軽にコメント下さい。
是非、みなさんも使ってみて下さいね！