Contact Form7でカスタムフィールド値が入るショートコードでバリデーションチェック

前提

WordPressのお問い合わせプラグイン「Contact Form7」でお問い合わせフォームを用意したサイト制作のお仕事。
ラジオボタンの選択項目が、しょっちゅう変わるし増える案件。
クライアントにContact Form7の編集画面をいじらせたくないので、カスタムショートコードを作って編集画面に入れておき、固定ページに設置したカスタムフィールドに入力した値がそこに入るようにした。そしたらデフォルトのバリデーションが動かずハマった。解決できたのでニッチすぎるメモ。
結論:カスタムショートコードにnameを入れる。

仕様

固定ページにAdvanced Custom Fieldsの繰り返しフィールドがこうあって、
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-14-12-05-07

フォームのページにこう表示させます。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-14-12-16-54

吐き出すinputタグ

集計するときに高1と高2で分けられていてほしいので、別々のラジオボタンにしているけれど、高1と高2のどちらか一方の希望日にチェックが付いていなければ、ラジオボタンの下にエラーを出したい。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-14-12-37-07

解決したコード

Contact form7のコンタクトフォームの編集画面でのショートコード

カスタムフィールド名(繰り返しフィールド):
kou1_day(高1)とkou2_day(高2)
サブフィールド名:
kou1_request_day(高1)、kou2_request_day(高2)。

functions.php

はまったところ

はじめ、[show_my_date_shortcode_date-1]みたいなショートコードを登録していたんだけど、submit押したらセレクタにnameがついた名前のDOMが作られそこにバリデーションメッセージがつっこまれるらしく、
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-14-13-11-45
wpcf7_add_shortcodeで呼び出すショートコードの中で、さらにwpcf7_do_shortcodeでショートコードを呼び出しているため、最終的なカスタムショートコードにnameがなく、エラーメッセージが表示されなかった。

参考

カスタムバリデーション-contactform7.com
wpcf7_do_shortcode-hookr.io

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です