Contact Form 7でチェックボックスやラジオをクリックするとエラーメッセージが出てしまう時の対処法
WordPressのお問い合わせプラグイン「Contact Form 7」で
例えばこのようなフォームのときに
チェックボックスにチェックを入れると､それ以前の必須項目のエラー文が表示されます｡
※ラジオボタンも同様
通常､上から順番に入力していくので大丈夫だとは思いますが､
あなたがこの記事に到達しているということは､そういう訳ではないのでしょう｡
エラー文のHTMLはこれです｡
<span class="wpcf7-not-valid-tip" aria-hidden="true">必須項目に記入もれがあります。</span>ちょっと強引な方法にはなりますが､
CSSでエラーを非表示にしておき､「送信」をクリックしたときに表示する､という方針で対処法をご紹介します｡
CSSに追記
以下を追記します｡
.wpcf7-form.hide_error_message .wpcf7-not-valid-tip {
display: none;
}CSSを編集できない場合は､お問い合わせページに「カスタムHTML」で記入しちゃいましょう｡
JSに追記
以下を追記します｡
//formタグにクラス追加
document.querySelector(".wpcf7-form").classList.add("hide_error_message");
//送信または確認ボタンをクリックしたとき
document.querySelectorAll(".wpcf7-confirm, .wpcf7-submit").forEach(function(elm){
elm.addEventListener("click", function(){
document.querySelector(".wpcf7-form").classList.remove("hide_error_message");
});
});jQueryバージョン
$(function(){
//formタグにクラス追加
$(".wpcf7-form").addClass("hide_error_message");
//送信または確認ボタンをクリックしたとき
$(".wpcf7-confirm, .wpcf7-submit").click(function(){
//formからクラスを削除
$(".wpcf7-form").removeClass("hide_error_message");
});
});JSを編集できない場合も､「カスタムHTML」で記入しちゃいましょう｡
すると､チェックボックスやラジオボタンをクリックしただけでは､エラー文が表示されないはずです｡
イレギュラーがあったらコメントで教えてください！
