サポート » プラグイン » wpcf7_feedback_responseでエラー表示位置の指定方法

  • 作者様、有用なプラグインを公開いただきありがとうございます。
    また、フォーラム参加者の方々、いつも有用な情報をありがとうございます。
    今回、お尋ねしたいのはContact Form 7 バージョン 5.7.2において、wpcf7_feedback_responseを用いてエラーメッセージを目的の位置に表示する方法です。

    やりたい事は以下の画像のように生年月日のどれかに未入力があった場合、一度だけ指定した場所にエラーメッセージを表示するというものです。

    やりたい事の画像1

    やりたい事の画像2

    該当箇所のコンタクトフォームのコード

    
    <tr>
    <th class="hissu">生年月日</th>
    <td>[select* birth-year class:text-short4 first_as_label "---" "1950" "1951" "1952" "1953" "1954" "1955" "1956" "1957" "1958" "1959" "1960" "1961" "1962" "1963" "1964" "1965" "1966" "1967" "1968" "1969" "1970" "1971" "1972" "1973" "1974" "1975" "1976" "1977" "1978" "1979" "1980" "1981" "1982" "1983" "1984" "1985" "1986" "1987" "1988" "1989" "1990" "1991" "1992" "1993" "1994" "1995" "1996" "1997" "1998" "1999" "2000" "2001" "2002" "2003" "2004" "2005"]年[select* birth-month first_as_label "---" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12"]月[select* birth-date first_as_label "---" "1" "2" "3" "4" "5" "6" "7" "8" "9" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23" "24" "25" "26" "27" "28" "29" "30" "31"]日
    <span class="wpcf7-custom-item-error birth-year birth-month birth-date"><span class="wpcf7-form-control"></span></span></td>
    </tr>

    こちらは、Contact Form 7 バージョン 5.5.6.1で作成して期待通りに動作している公開サーバーの状態です。

    wpcf7_feedback_responseのコードは以下のようになっています。

    // Auther Takata
    // エラーの出力位置をカスタマイズする
    /* 参考リンク: https://do-jo.jp/plugins/1307/
     * 				https://qiita.com/kinshist/items/7a16a1fe4bae27fe11b2
     * 				https://nldot.info/i-want-to-change-the-validation-message-display-position-in-copipable-contact-form-7/
     */
    function wpcf7_custom_item_error_position( $items, $result ) {
    	$class = 'wpcf7-custom-item-error';
    	$names = array( 'birth-year', 'birth-month', 'birth-date', 'qualifications', 'other-qualifications' ); // name属性を指定
    	$processed_day_messeage = false;
    
    	if ( isset( $items['invalid_fields'] ) ) {
    		foreach ( $items['invalid_fields'] as $k => $v ) {
    			$orig = $v['into'];
    			$name = substr($orig, 0, strcspn($orig,':'));
    			$name = substr( $name, strrpos($name, ".") + 1 );
    			if ( in_array( $name, $names ) ) {
    				if ($name == 'birth-year' || $name == 'birth-month' || $name == 'birth-date') {
    					if ($processed_day_messeage == true) {
    						unset($items['invalid_fields'][$k]);
    						continue;
    					} else {
    						$processed_day_messeage = true;
    					}
    				}
    				$items['invalid_fields'][$k]['into'] = ".{$class}.{$name}";
    			}
    		}
    		$items['invalid_fields'] = array_values($items['invalid_fields']);
    	}
    	return $items;
    }
    add_filter( 'wpcf7_feedback_response', 'wpcf7_custom_item_error_position', 10, 2 );
    

    年・月・日の3つの内いずれかが未入力であった場合、他にも未入力があると、複数個エラーメッセージが出るので1つのみ残して
    $items[‘invalid_fields’]のエラーを削除してエラーを1つだけにして、$items[‘invalid_fields’]のintoにエラーを出したい場所のクラスを指定して
    実現しています。

    しかしながら、テスト環境でプラグインを最新化しContact Form 7 バージョン 5.7.2においては同様のコードを用いても
    うまくエラーが指定した場所に表示されず、エラーの発生した要素の直下に表示されてしまいます。

    上手くいかない例1

    上手くいかない例2

    テスト環境でしたので、コードに
    error_log( 'カスタムログ出力:$items["invalid_fields"] ' . print_r($items['invalid_fields'], true) );
    を入れ込んで
    デバッグログに、$items[‘invalid_fields’]をダンプしてみた所、バージョン 5.5.6.1から項目名の変更があったため
    バージョン 5.7.2では拾えてなかったようでしたので、項目名をfieldに変更して、複数エラーを1つにする事は出来ました

    しかし、バージョン 5.5.6.1にあったintoという項目が外側に移動していました。
    (Multi-Step Forms等に対応するためか外側のintoでエラーの発生したフォーム名が格納されていました。)
    ですので、書き換えるのはここじゃないと判断しダンプ結果を再確認した所、idrefという項目が新たに用意されていました。
    試しにこちらにエラーを出したい要素のクラス名を指定してみましたがダメでした。

    上手くいかないのは当方のミスなのは明白なのでスクリプトエラー等で原因を探れないか確認しましたがエラーは出ていませんでした。

    そもそもidrefという項目は何のための項目か検索を重ねRest APIの読み上げの為の項目らしいという所まではたどり着けたのですが、
    当方Rest APIについては無知なので違うということだけはわかったのですが、ここで手詰まりになってしまいました。

    どうすれば、バージョン 5.5.6.1の時の様にバージョン 5.7.2でエラー位置を指定できるのか、どなたかご教授いただければ幸いです。`

    • このトピックはtakata9456が1年、 2ヶ月前に変更しました。
    • このトピックはtakata9456が1年、 2ヶ月前に変更しました。
3件の返信を表示中 - 1 - 3件目 (全3件中)
  • モデレーター Takayuki Miyoshi

    (@takayukister)

    wpcf7_feedback_response のフィルターフックを使うのには何か理由があるのでしょうか? それは WP REST API のフィードバックリクエストへの応答に対するフィルターです。REST API について詳しくないのでしたら無理して使う必要もないのではと思うのですが。

    単純にフロントエンドで CSS を使ってエラーメッセージを非表示にしてもいいですし、もっと根本的な解決を目指すのであればカスタムバリデーションカスタムフォームタグを実装するなど、方法はいくらでも考えられます。

    トピック投稿者 takata9456

    (@takata9456)

    作者様直々のお返事ありがとうございます。
    wpcf7_feedback_responseを使用しているのは、Googleでエラー出力位置の変更で検索した結果
    出てきた記事を基にしているからです。(コードに参考リンクを記述してあります)

    ご指摘いただいた、カスタムバリデーションやカスタムフォームタグの学習も開始しましたが、
    思ったような動作をさせるには、思いのほか工数がかかりそうで納期に間に合わないかもしれません。

    わたくしが求められているのは、エラー出力位置の変更だけですので、

    大変失礼なお願いかもしれませんが、バージョン 5.7.2で現行のwpcf7_feedback_response
    エラー出力位置を用意したspanタグへ出力するように指定する方法をご教授いただくことは可能でしょうか?

    不躾なお願いなのは重々承知しておりますが、何卒よろしくお願い申し上げます。

    モデレーター Takayuki Miyoshi

    (@takayukister)

    何か甚だしい勘違いをされているような気がするのですが、このサポートフォーラムの参加者は皆ボランティアとして無償で回答しています。あなたの業務関係の質問のために時間を割く義理はありません。

3件の返信を表示中 - 1 - 3件目 (全3件中)
  • トピック「wpcf7_feedback_responseでエラー表示位置の指定方法」には新たに返信することはできません。