WordPressのプラグイン Contact Form 7
方々で使われていますが、
単品でのバリデーション機能には不満が残ります。
具体的には・・・
・確認画面が無い
「メールアドレスの記述形式は正しかったが、
アドレスを打ち間違えた」ようなミスのチェックができない。
・入力内容を、DBに保存しておくことができない
・チェック機能が貧弱
「入力項目が必須かどうか」、
「メールアドレスなどの書式を満たしているか」、
「数値の最大値、最小値」などの判定のみ。
入力と同時に判定したり、チェックする内容のカスタマイズが困難。
（ソースを直接修正するのもありですが、手間が多すぎる）
1番目の問題点は、「Contact Form 7 add confirm」などの
プラグインを利用すれば、解決は容易です。
２番目の問題点に関しても、「Contact Form DB」で
CSV出力や、送信別に入力項目の整理まではできます。
※指定したテーブルに直接流し込むことはできません。
問題は３番目。
カスタマイズできるチェック機能を追加できるプラグインが見つけられなかったので、jQuery-Validation-Engine を利用します。
githubの配布元
https://github.com/posabsolute/jQuery-Validation-Engine
作者のWebサイト？
http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/
英語ですが、丁寧に使用方法が記載されています。
単品での実装は、ややこしく無いのですが・・・
実装例（WordPress やContact Form 7 とは直接関係ありません）
これが、WordPress上のプラグインと連動させる・・・
となると、話がややこしくなります。
Contact Form 7 に組み込む
下記リンク先との手順でいけばほぼOK なのですが・・・・
http://welcustom.net/jquery-validation-engine/
Contact Form 7 のバリデーション機能と干渉し、
・入力内容が不正な箇所に対し、二重に警告が表示される。
・入力箇所のセルの背景が変になる
などの問題点がありました。
どうやって対応しよう？
対応方法
バリデーション処理は、極力
jQuery-Validation-Engine 側にやらせる。
逆に言えば、Contact Form 7 のバリデーション機能は極力使わない。
ontact Form 7 で記述するフォーム内容の例
/ショートコード/
お名前 （ニックネームでも大丈夫！）
[text your-name id:your-name class:your-name]
メールアドレス
[email your-email id:your-email class:your-email]
題名
[text your-subject id:your-subject class:your-subject]
メッセージ本文
[textarea your-message id:your-message class:your-message]
[confirm id:confirm class:confirm "確認する"]
[submit id:submit "送信する"]
[back id:back class:back "戻る"]
/おわり/
idを指定しておきます。
このうち、 your-name と your-email に対し、バリデーション機能を付加しますので、
少なくともこれら２つの項目には、固有のidを指定する必要があります。
フォームを呼び出すショートコードに、フォームにIDを記述する。
[contact-form-7 id="180" title="exForm" html_id="exForm" ]
ContactFormの仕様上、各フォームのショートコードが記述されている箇所において、
フォーム記述に応じた記述を出力します。
そこに、jQueryを使ってjQuery-Validation-Engineに関する設定を行います。
header.php（
〜 のような、cssやjsの読み込みの指定が記述されているファイル）において wp_head(); の直前あたりに jsファイル呼び出し処理の呼び出し部分を記述
〜タグの記述、CSSの読み込みなどの記述〜
<?php do_action( 'hoge' );//20141204 by Minoshima スクリプトを追加?>
<?php wp_head(); ?>
〜以下略〜
functions.php に
・jQuery-Validation-Engineの呼び出し部分
・フォームに対し、jQuery-Validation-Engineの処理を付加
/jsとかcssを表示/
add_action( 'wp_enqueue_scripts', 'hoge' );
function hoge() {
wp_enqueue_script('jquery');
//jquery validation plugin
wp_enqueue_style( 'validationEngine.jquery.css', '/DIRPATH/css/validationEngine.jquery.css', array(), '1.0', 'all');
wp_enqueue_script( 'jquery.validationEngine.js', '/DIRPATH/valid/js/jquery.validationEngine.js', array('jquery'));
wp_enqueue_script( 'jquery.validationEngine-ja.js', '/DIRPATH/valid/js/jquery.validationEngine-ja.js',array('jquery'));
//mod CF7
wp_enqueue_script( 'lightform-validate.js', '/SRCPATH/addValidate.js', array('jquery'));
}
DIRPATH = jQuery-Validation-Engine の置いてあるディレクトリのパス
SRCPATH = Contact Form 7 で生成されるフォームに対し、設定を付加する処理を行うファイルの位置。
各自の環境にあわせて解釈してください。
addValidate.js （処理付加ファイル）
jQuery(window).ready(function(){
/*フォームに対して、バリデーションエンジンを追加*/
jQuery('#exForm').validationEngine('attach');
/*それぞれの項目に対して、validation用のクラスを挿入する*/
jQuery('#your-name').addClass('validate[required]');
jQuery('#your-email').addClass('validate[required,custom[email]]');
});
バリデーションエンジンの追加の部分に関しては、本家のマニュアルそのまんまです
注:'#exForm':Contact Formで生成されるフォームのID
後は、validation機能を付加したい項目のIDに対し、jQuery-Validation-Engine で
処理したい内容のクラスを付加します。
詳細は別の機会に。