MW WP Formの動的バリデーション＆JSによる表示切替カスタマイズ

100ウェブでは、WordPressサイトに組み込むフォームにはいつも「Contact Form 7」を利用していますが、フォームプラグインでもうひとつ有名なものに「MW WP Form」というのがあります。
今回はこの「MW WP Form」を使ったフォームのカスタマイズについてです。
具体的なカスタマイズの内容は以下の通りです。

• ラジオボタンの選択肢で「その他」を選んだらその下に文章を入力するためのテキストエリア項目を動的に出現させ、かつそのテキストエリアは必須項目とする。
• チェックボックスも同様に「その他」のときにテキストエリア出現＆必須化する

2つの機能がありますね。
一つ目がMW WP Formのバリデーション制御、二つ目がjavascriptによる表示の切り替え。
どちらも単体では簡単ですが、合わせ技だと割と役に立つシーンが増えるかもしれません。
それでは実装していきましょう。
　
まず「MW WP Form」の投稿に次のように記述します。

[mwform_checkbox name="c-active-q1" children="選択肢１,選択肢２,その他"]</div>
<div id="disp_by_checkclick1">[mwform_textarea name="c-reactive-q1" cols="50" rows="6"]</div>
[mwform_checkbox name="c-active-q2" children="選択肢１,選択肢２,その他"]
<div id="disp_by_checkclick2">[mwform_textarea name="c-reactive-q2" cols="50" rows="6"]</div>

[mwform_radio name="r-active-q1" children="選択肢１,選択肢２,その他"]
<div id="disp_by_radioclick1">[mwform_textarea name="r-reactive-q1" cols="50" rows="6"]</div>
[mwform_radio name="r-active-q2" children="選択肢１,選択肢２,その他"]
<div id="disp_by_radioclick2">[mwform_textarea name="r-reactive-q2" cols="50" rows="6"]</div>

　
次に functions.php に次のコードを追記
【MW WP Formのバリデーションにフィルター】

//MW WP Form　動的バリテーション
function kaiza_active_validation( $Validation, $data ) {
  foreach ($data as $key => $value) {
    //チェックボックス
    if (preg_match('/^c-active-q(\d+)$/', $key, $matches)) {
      $s = $matches[1]; // キーから数字部分を抽出
      if (isset($value['data']) && is_array($value['data'])) {
        if (in_array('その他', $value['data'])) {
          $Validation->set_rule("c-reactive-q$s", 'noEmpty', array(
            'message' => '必須項目です。'
          ));
        }
      }
    }
    //ラジオボタン
    if (preg_match('/^r-active-q(\d+)$/', $key, $matches)) {
      $t = $matches[1]; // キーから数字部分を抽出
      if ($value == 'その他') {
        $Validation->set_rule("r-reactive-q$t", 'noEmpty', array(
          'message' => '必須項目です。'
        ));
      }
    }
  }
  return $Validation;
}
add_filter( 'mwform_validation_mw-wp-form-XXXXXX', 'kaiza_active_validation', 10, 3 );
//mw-wp-form-XXXXXXのところはMW WP Formが発行する修飾子を充てます。（投稿画面に出てます）

　
続けてwp_footer内に設置する【フォームを操作するjavascriptコード】

//フォーム操作js
function js_for_activeform() {
  ?>
  <script>
    jQuery(function($) {
      // ラジオボタンの状態に応じて表示を切り替える関数
      function toggleDisplayByRadio(radioName, switchItemSelector) {
        let switchItem = $(switchItemSelector);
        let hiddenValueExists = switchItem.find('input[type="hidden"]').val() !== undefined;
        let isSelectedOther = $(`input[name='${radioName}']:checked`).val() === 'その他';
        if (hiddenValueExists || isSelectedOther) {
          switchItem.show();
        } else {
          switchItem.hide();
          switchItem.find('textarea').val('');
        }
      }
      // チェックボックスの状態に応じて表示を切り替える関数
      function toggleDisplayByCheckbox(checkboxName, switchItemSelector) {
        let switchItem = $(switchItemSelector);
        let hiddenValueExists = switchItem.find('input[type="hidden"]').val() !== undefined;
        let checkboxes = $(`input[name='${checkboxName}']`);
        let display = hiddenValueExists || checkboxes.filter(':checked').toArray().some(function(elem) {
          return $(elem).val() === 'その他';
        });
        if (display) {
          switchItem.show();
        } else {
          switchItem.hide();
          switchItem.find('textarea').val('');
        }
      }

      // ラジオボタンの変更を監視
      $("input[name='r-active-q1'], input[name='r-active-q2']").change(function() {
        toggleDisplayByRadio('r-active-q1', '#disp_by_radioclick1');
        toggleDisplayByRadio('r-active-q2', '#disp_by_radioclick2');
      });
      // ラジオボタン初期状態の設定
      toggleDisplayByRadio('r-active-q1', '#disp_by_radioclick1');
      toggleDisplayByRadio('r-active-q2', '#disp_by_radioclick2');

      // チェックボックスの変更を監視
      $("input[name='c-active-q1[data][]'], input[name='c-active-q2[data][]']").change(function() {
        toggleDisplayByCheckbox('c-active-q1[data][]', '#disp_by_checkclick1');
        toggleDisplayByCheckbox('c-active-q2[data][]', '#disp_by_checkclick2');
      });
      // チェックボックス初期状態の設定
      toggleDisplayByCheckbox('c-active-q1[data][]', '#disp_by_checkclick1');
      toggleDisplayByCheckbox('c-active-q2[data][]', '#disp_by_checkclick2');
    });
  </script>
  <?php
}
add_action('wp_footer', 'js_for_activeform');

jquery前提となっていますので、jqueryを参照するようにしてください。

「MW WP Form」利用者の皆さん、ご活用ください。

---