どうも、バナナです。

MW WP Formを使い初めの頃に、バリデーションエラーメッセージが表示されないことが2回ありました。

それぞれの原因は下記でした。

• 親要素にfont-size: 0;を指定していた
• ショートコードにshow_error="false"を指定していた

慣れていればすぐに気付けるミスだと思うのですが、使い始めの頃は何が原因で表示されていないのかが分かりませんでした。

今回はMW WP Form初心者向けにエラー内容が表示されなかった理由と原因について、解説して行きたいと思います。

エラーメッセージの仕様

入力内容にエラーがあった場合、各入力要素（inputやtextarea）の直後にエラー内容が挿入されます。

<input type="text" name="name" value="">
<span class="error">未入力です。</span>

※span内のテキストはエラー内容によって変わります。

エラー内容が表示されない原因の確認

まず、最初に説明した2つ原因のうちどちらに当てはまるか？を確認するために検証（デベロッパーツール）で<span class="error"></span>がHTML上に挿入されているか？を確認しましょう。

確認手順

Chromeでの確認方法です。

検証（デベロッパーツール）を開きたいので、画面上（ブラウザ内）の何もないところで右クリックからの「検証」をクリックしてください。

検証ツールが開いたら、左上にあるアイコンをクリックしてinputやtextareaの直後に<span class="error"></span>が存在しているか確認してみましょう。

HTML上に<span class="error"></span>が存在していた場合は、CSSで見えないようになっている可能性があります。
→ 【失敗1】親要素にfont-size: 0;を指定しているを確認してみましょう。

存在していない場合は、エラーメッセージを表示しない設定になっている可能性があります。
→【失敗2】ショートコードにshow_error=”false”を指定していたを確認してみましょう。

【失敗1】親要素にfont-size: 0;を指定している

フォームを埋め込んだページには自動的にMW WP Formのstyle.cssが読み込まれます。
そのstyle.cssには.errorに下記のスタイルが設定されています。

.mw_wp_form .error {
  font-size: 93%;
  color: #B70000;
  display: block;
}

フォントサイズが%で指定されています。
%は親要素のフォントサイズの93％の大きさで表示してください。という意味になります。

仮に親要素が16px。
設定したフォントサイズが93％だと約15pxのサイズになります。

なので、親要素にfont-size: 0;が指定されていると.errorもフォントサイズが0になってしまい表示されていなかったのです。

解決方法

• 親要素にfont-size: 0;の指定をやめる。
• .errorにフォントサイズを指定してあげる

どちらかの方法で解決することができます。

それでも解決しない場合は？

フォントサイズが原因ではないかもしれません。
下記を確認してみましょう。
※<span class="error"></span>がHTML上に存在していることが前提です。

• display: none;になっていませんか？
• opacity: 0;になっていませんか？
• visivility: hidden;になっていませんか？
• colorが背景色と同じになっていませんか？

【失敗2】ショートコードにshow_error=”false”を指定していた

どこかのサイトからコピペしたままショートコードを埋め込んでいませんか？
そうです私です…。

引数

上記はmwform_text（ テキストフィールド ）の引数です。
設定できる引数はショートコードによって変わるので、詳しくは公式サイトのショートコード一覧からご確認ください。

バナナは使い始めた頃だったので、そもそもエラーを表示しないという記載がショートコートにあることに気づきませんでした。

解決方法

ショートコードからshow_error="false"の記述を削除しましょう。

余談

使い始めの頃、show_errorは何に使うんだろう？と思っていました。

だってエラー内容を表示しないってユーザーからしたらどこをミスしてるのか分からないから使いづらいですよね？

しかしshow_errorにもちゃんとした使い方があります。
エラー内容をinput要素の直後ではなく、任意の箇所に出したい時などに使用します。

まとめ

エラーメッセージが表示されない時にまず確認してほしい箇所は下記の2点です。

• 親要素にfont-size: 0;を指定していませんか？
• ショートコードにshow_error="false"を指定していませんか？

今回の表示されない原因は、MW WP Formを使い慣れている人であればすぐに気づけると思います。

なんでも最初は、まずなにが原因かに気づきにくいと思います。
そんな方向けになにか参考になれば嬉しいです。

今回はこの辺で。
またね。