サポート » 使い方全般 » contact form 7のラジオボタン選択で他の項目のエラーが表示

  • contact form 7を利用しています。
    下記の通り、フォームを作成したのですが、ラジオボタンを選択するとその項目より上の入力必須にしている項目のバリデーション(入力してください)が表示されてしまいます。

    試しにラジオボタンではなく、プルダウンやチェックボックスにしてみましたが、同様のバリデーション(入力してください)が表示されてしまいます。

    確認ページとサンクスページを作成するためにmulti-step formsも利用しています。

    <table class="contact-form__table">
          <tbody>
            <tr class="contact-form__tr">
              <th class="contact-form__th">
                <div class="contact-form__hissu">必須</div>
                <div class="contact-form__label">ご担当者様</div>
              </th>
              <td class="contact-form__td">
                [text* application-name class:contact-form__input class:contact-form__input--name]
              </td>
            </tr>
            <tr class="contact-form__tr">
              <th class="contact-form__th">
                <div class="contact-form__hissu">必須</div>
                <div class="contact-form__label">企業名</div>
              </th>
              <td class="contact-form__td">
                [text* application-campany class:contact-form__input class:contact-form__input--company]
              </td>
            </tr>
            <tr class="contact-form__tr">
              <th class="contact-form__th">
                <div class="contact-form__hissu">必須</div>
                <div class="contact-form__label">住所</div>
              </th>
              <td class="contact-form__td">
                [text* application-address class:contact-form__input class:contact-form__input--address]
              </td>
            </tr>
            <tr class="contact-form__tr">
              <th class="contact-form__th">
                <div class="contact-form__hissu">必須</div>
                <div class="contact-form__label">電話番号</div>
              </th>
              <td class="contact-form__td">
                [tel* application-tel class:contact-form__input class:contact-form__input--tel]
              </td>
            </tr>
            <tr class="contact-form__tr">
              <th class="contact-form__th">
                <div class="contact-form__hissu">必須</div>
                <div class="contact-form__label">メールアドレス</div>
              </th>
              <td class="contact-form__td">
                [email* application-email class:contact-form__input class:contact-form__input--mail]
              </td>
            </tr>
            <tr class="contact-form__tr">
              <th class="contact-form__th contact-form__th--language">
                <div class="contact-form__hissu contact-form__hissu--language">必須</div>
                <div class="contact-form__label">ダミー</div>
              </th>
              <td class="contact-form__td">
                [radio application-language use_label_element class:contact-form__radio class:contact-form__radio--language "ダミー" "ダミー" ]
              </td>
            </tr>
            <tr class="contact-form__tr">
              <th class="contact-form__th">
                <div class="contact-form__hissu">必須</div>
                <div class="contact-form__label">ダミー</div>
              </th>
              <td class="contact-form__td">
                [text* application-industry class:contact-form__input class:contact-form__input--industry]
              </td>
            </tr>
            <tr class="contact-form__tr">
              <th class="contact-form__th">
                <div class="contact-form__hissu">必須</div>
                <div class="contact-form__label">ダミー</div>
              </th>
              <td class="contact-form__td">
                [text* application-store class:contact-form__input class:contact-form__input--store]
              </td>
            </tr>
            <tr class="contact-form__tr">
              <th class="contact-form__th contact-form__th--total">
                <div class="contact-form__hissu">必須</div>
                <div class="contact-form__label">ダミー</div>
              </th>
              <td class="contact-form__td">
                <div class="contact-form__inner contact-form__inner--total">
                   <span>ダミー</span>[text* application-full-time class:contact-form__input class:contact-form__input--full-time]
                   <span>ダミー</span>[text* application-part class:contact-form__input class:contact-form__input--part]
                </div>
                <div class="contact-form__inner contact-form__inner--total">
                   <span>ダミー</span>[text* application-other class:contact-form__input class:contact-form__input--other]
                   <span>ダミー </span>[text* application-total class:contact-form__input class:contact-form__input--total]
                </div>
              </td>
            </tr>
            <tr class="contact-form__tr">
              <th class="contact-form__th">
                <div class="contact-form__nini">任意</div>
                <div class="contact-form__label">ダミー</div>
              </th>
              <td class="contact-form__td">
                <div class="contact-form__inner contact-form__inner--fax">
                   [text* application-fax1 class:contact-form__input class:contact-form__input--fax1]-[text* application-fax2 class:contact-form__input class:contact-form__input--fax2]-[text* application-fax3 class:contact-form__input class:contact-form__input--fax3]
                <div class="wpcf7-custom-item-error application-fax1"></div>
                </div>
              </td>
            </tr>
            <tr class="contact-form__tr">
              <th class="contact-form__th">
                <div class="contact-form__nini">必須</div>
                <div class="contact-form__label">ダミー</div>
              </th>
              <td class="contact-form__td">
                 [radio application-notification class:contact-form__radio class:contact-form__radio--notification use_label_element "ダミー" "ダミー"]
              </td>
            </tr>
          </tbody>
        </table>
        <div class="contact-form__submit-wrap">
          [submit class:contact-form__submit "入力内容を確認する"]
          [multistep application-submit first_step "/application/application-confirm"]
        </div>
    • このトピックはhayato0101が1年、 7ヶ月前に変更しました。
1件の返信を表示中 - 1 - 1件目 (全1件中)
  • hayato0101さん、こんにちは。

    そういう仕様のようですよ。
    普通にデフォルトで用意されているフォームに、ラジオボタンだけ追加して動作確認してみても同様の動作をしています。
    ラジオボタンのチェックを付けた(変更した)際に必須項目の判定が JavaScript で動作しているようです。
    あとは JavaScript の判定を、ラジオボタンの操作時に動かなくする方法があるかどうかでしょうか。

    ご参考になれば。

1件の返信を表示中 - 1 - 1件目 (全1件中)
  • トピック「contact form 7のラジオボタン選択で他の項目のエラーが表示」には新たに返信することはできません。