サポート » プラグイン » Contact Form 7 必須か否かを条件によってJavaScriptで制御したい

  • 解決済 junjun1012

    (@junjun1012)


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

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

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

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

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

    (@takayukister)

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

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

    トピック投稿者 junjun1012

    (@junjun1012)

    @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件中)
  • このトピックに返信するにはログインが必要です。