Contact Form 7 必須か否かを条件によってJavaScriptで制御したい

  • 解決済 junjun1012

    (@junjun1012)


    1年、 8ヶ月前

    コンタクトフォームにて「サービスについて」「採用について」「その他」とそれぞれラジオボタンを配置し、「採用について」を選択した場合のみ、「募集職種」というセレクトボックスが表示される実装を行いました。

    「募集職種」は必須項目なのですが、「採用について」以外を選択時にもこれが効いてしまい、非表示の要素のバリデーションエラーとなってしまいます。

    JavaScriptで”aria-required”の値や、”required”の切り替えを制御してみましたが、必須項目の解除が出来ませんでした。

    どのように実装すればよろしいでしょうか？

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター Takayuki Miyoshi

    (@takayukister)

    1年、 8ヶ月前

    「募集職種」項目を任意入力に変えて、カスタムバリデーションによる条件付きバリデーションの実装を試してみてください。

    なお将来的には Schema-Woven Validation に基づいた条件付きバリデーションのルールが実現可能になり、それによりサーバー側だけでなくクライアント側でのバリデーションも含んだ一括制御が可能になる予定です。

    トピック投稿者 junjun1012

    (@junjun1012)

    1年、 8ヶ月前

    @takayukisterさん

    ありがとうございます！

    カスタムバリデーション参考にさせていただきまして、無事実装できました！

    もっと良い書き方があると思いますが、下記コードにて解決できました。

    add_filter('wpcf7_validate_select','custom_select_validation_filter', 11, 2);
add_filter('wpcf7_validate_select*', 'custom_select_validation_filter', 11, 2);

function custom_select_validation_filter($result, $tag)
{
  
  $value = isset($_POST[$tag['name']]) ? sanitize_text_field($_POST[$tag['name']]) : '';

  $isRecruitmentSelected = isset($_POST['radio-565']) && $_POST['radio-565'] === '採用について';

  if ($isRecruitmentSelected && empty($value)) {
    $result->invalidate($tag, 'セレクトボックスは必須です。');
  }

  return $result;
}
2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「Contact Form 7 必須か否かを条件によってJavaScriptで制御したい」には新たに返信することはできません。