WordPressでjQueryが動かない。contactform7でリアルタイムエラーチェックしたいです。

Question

前提・実現したいこと

https://tanacio.com/contactform7-jquery-validation-engine/

上記サイトを参考に、ContactForm7にカスタマイズして、リアルタイムでエラーをチェックができるようにしたいです。

色々確認したり試したりしたのですが解決できず、どなたかアドバイスいただけますと幸いです。

発生している問題・エラーメッセージ

リアルタイムエラーチェックが作動しません。
もともとのWordPress環境（WordPress 5.3.2、Lionblog）では作動していたのですが、別の環境（WordPress 5.3.2、Affinger5）で同様のコードを記載してもこちらの機能が動かなくなりました。

ディベロッパーツールには何もエラーメッセージが出ていません。

該当のソースコード

　子テーマのheader.phpの</head>直前に置いています。

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css' type='text/css' media='all' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js'></script>

<!-- コンタクトフォーム リアルタイムで入力エラー追加ここから -->
<script>
jQuery(document).ready(function(){
	jQuery("#formID").validationEngine();
});
</script>

<script type="text/javascript">
jQuery(document).ready(function(){
if (jQuery(window).width() < 768) {
 jQuery("#textsp").addClass("validate[required]").attr("data-prompt-position", "inline");
 jQuery("#mailsp").addClass("validate[required]").attr("data-prompt-position", "inline");
 jQuery("#tel").addClass("validate[required]").attr("data-prompt-position", "inline");
 jQuery("#p-postal-code").addClass("validate[required]").attr("data-prompt-position", "inline");
 jQuery("#p-region").addClass("validate[required]").attr("data-prompt-position", "inline");
 jQuery("#p-locality").addClass("validate[required]").attr("data-prompt-position", "inline");
 jQuery("#content").addClass("validate[required]").attr("data-prompt-position", "inline");
} else {
 jQuery("#textsp").addClass("validate[required]");
 jQuery("#mailsp").addClass("validate[required]");
 jQuery("#tel").addClass("validate[required]");
 jQuery("#p-postal-code").addClass("validate[required]");
 jQuery("#p-region").addClass("validate[required]");
 jQuery("#p-locality").addClass("validate[required]");
 jQuery("#content").addClass("validate[required]");
}
});
</script>
<!-- コンタクトフォーム リアルタイムで入力エラー追加ここまで -->

▼固定ページのビジュアル内にはhtml-idもつけています
[contact-form-7 id="1824" title="コンタクトフォームnew" html_id="formID"]

試したこと

・子テーマのheader.php 自体が機能してないのかとも思いましたが、他のscript構文を入れたらそちらは動いたので、ファイルの読み込みの問題ではなさそうです
・</head>直前ではなく</body>直前においてもダメでした
・以下３文をfunctions.phpに置き換えてもダメでした

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css' type='text/css' media='all' />
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.min.js'></script>
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js'></script>

↓こちらに置き換えてもダメでした

function theme_name_scripts() {
 wp_enqueue_style( 'validationEngine.jquery.css', 'https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css', array(), '1.0', 'all');
 wp_enqueue_script( 'jquery.validationEngine-ja.js', 'https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.min.js', array('jquery'), '2.0.0', true );
 wp_enqueue_script( 'jquery.validationEngine.js', 'https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js', array('jquery'), '2.6.4', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Answer 1

if (jQuery(window).width() < 768) {

これがきいてたりしないでしょうか？
見た感じ、「画面読み込み時にウィンドウの幅が768より小さいなら」になります。

あと画面出力されたHTMLのソースを確認し、本当にformのidがformIDになっているか確認してみてください。
CMSとかプラグインとかって結構色んな情報を管理のために勝手に付加します。

Comments

[yujill]

ご丁寧にありがとうございます！！

ディベロッパーツールでHTMLソース確認したら、formのidが「formID」ではなかったです＞＜
この場合どのように修正したらよろしいのでしょうか・・・。

知識不足で申し訳ございません。。。

[yujill]

よく見たらつけたはずのid（html_id）がついていなかったです＞＜
<form action="/inquery/#wpcf7-f1824-p1260-o3" method="post" class="wpcf7-form" novalidate="novalidate">

[m.ts10806]

んーもしかして下記参照にされたんでしょうか。
https://tanacio.com/contactform7-jquery-validation-engine/

いずれにしても今のままだとバリデートルールが適用されないと思うので
if (jQuery(window).width() < 768) {
の分岐は削除して良いのではと。

[yujill]

そうです！こちらのサイト参考にしました。

if (jQuery(window).width() < 768) {
の分岐を削除しても動きまでんでした＞＜

PC版では吹き出しでエラーコメント、SP版ではHTML形式でエラーコメントを出力したいので、条件分岐したという趣旨でした。

[m.ts10806]

なるほど、ただdata属性って動的に変更したら後から拾えなかった気がします（未検証）

ひとまず、なんとかしてIDを振るか、classが振られているwpcf7-form にあててみるか、どちらかを次は試してみてください。

classのほう
jQuery(".wpcf7-form ").validationEngine();

[yujill]

とりあえずjQuery(".wpcf7-form ").validationEngine();
でいけました！！！

一旦これで様子みます＾＾
なんどもご丁寧にありがとうございました！！