メールフォームプロでチェックボックスやラジオボタンは、デフォルトではエラーメッセージのみのバリデーションなので、エラーメッセージを非表示にした場合の対処法について。
基本、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装飾だけでエラーを表現できました。