Contact form 7に項目チェック機能を加えてくれる「Jquery Validation For Contact Form 7」が効かない

  • 更新日:
  • 公開日:

WordPressでサイト構築する時、お問い合わせフォームは「Contact form7」を毎回のように使用しています。最近このContact form 7 に項目チェック機能を付けて欲しいという要望がありまして、調べてみると「Jquery Validation For Contact Form 7」を発見しました。(javascriptのプロパティ等を見た感じ、”jQuery Validate Plugin”を使用しているようです)

構文エラーが発生

プラグインをインストールして有効化し、簡単な設定をした後にJavascriptのコンソールに

"Uncaught Error: Syntax error, unrecognized expression: form.wpcf7-form"

とエラーが出てしまいました。

原因はプラグインのソースコードそのもの

原因はプラグインのソースコード自体でした。

解決方法はプラグインの編集から「jquery-validation-for-contact-form-7/js/jquery.jvcf7_validation.js」を開き、下記ソースコード部分を修正します。

jQuery(document).ready(function(){
  jQuery('.wpcf7-validates-as-required').addClass('required');
  jQuery('.wpcf7-email').addClass('email');
  jQuery('form.wpcf7-form"').each(function(){
    jQuery(this).validate();
  });
});

ハイライトした4行目部分の「form.wpcf7-form”」を「form.wpcf7-form」に変えます。ダブルクォーテーション(「”」)を削除するだけで解決しました。

書いた人

Symbol Mark

Ryoichi(しつ)

除菌ティッシュを買い込んで使いきれずによく乾かす人。

療養目的で退職し、どうやって生きていくか模索中。最近は勉強目的でLaravelやVue.js弄ったり、趣味で音で遊んでます。

※2019年10月16日現在ブログリニューアル中です。崩れなどが発生していたらすみません。

うぇぶ: @s_ryone