メールフォームプロ-チェックボックスの必須項目について

メールフォームプロでチェックボックスやラジオボタンは、デフォルトではエラーメッセージのみのバリデーションなので、エラーメッセージを非表示にした場合の対処法について。

 

基本、radioやcheckboxはCSSによる装飾ができないブラウザ依存のパーツなので、エラーアラートなどを表示するには、ラベルを利用したbeforeやafterなどのCSSセレクタの疑似要素によって制御する必要がある。checkbox自体はdisplay:noneにしてhidden扱いに。

(というか、メールフォームプロのエラーチェック機能をHTMLバリデートで表示する方法はかなり時間がかかりそうな気がしたのでした)

 

ボタン押下のタイミングでJQueryによりrequired属性をtrueにして、ラベルタグのbefore疑似属性でエラーアラートデザインをすることで解決。

ちょっとややこしいのですが、最初に属性値requiredにfalseを渡し、オンクリック時にrequiredにtrueを渡します。

重要なのはcheckboxと隣接するラベルタグのbefore疑似要素と、checkboxがJQueryによってrequired疑似要素を取得した場合のCSSの2種類のデザインを用意して、submitボタンを押したときのみ枠線が赤くなるようなセレクタを追加。

うまくメールフォームプロのエラーメッセージを非表示にした状態でCSS装飾だけでエラーを表現できました。