Contact Form 7でのバリデーションはjQueryプラグインのexValidationが便利！

Contat Form 7といえばWordPressでフォームを実装できる超メジャープラグイン。実はこれまであまり使ったことがなく、仕事で必要になったので触ってみたところ、デフォルトのバリデーションは必須チェックしかないらしい。

何かバリデーションを追加できる良い方法がないかなと調べていると、下記の記事を発見。

他のフォームバリデーション用JavaScriptと組み合わせると。上記は少し難しそうだったので、Costom Field GUI Utility 3で使用されている「exValidation」を使うことにしました。

組み合わせ方法

exValidationについての詳しい情報は公式サイト「どんなフォームにも使えるjQueryのフォームバリデーション exValidation :: 5509」をご覧いただければかなり詳細に書いてありますが、バリデーションの種類も豊富で実装も簡単です。

JavaScript

下記のような感じで、バリデーションを適用されるフォームに「exValidationメソッド」を適用します。exValidationメソッドでは様々なオプションと、各項目にどんなバリデーションを行うかを指定できます。

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/exValidation/exvalidation.min.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/exValidation/exchecker-ja.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/js/exValidation/exvalidation.css" />
<script type="text/javascript">
jQuery( function( $ ) {
$('#hoge form')
	.exValidation({
		errHoverHide: true,
		rules: {
			'name': 'chkrequired',
			'furigana': 'chkrequired chkkatakana',
			'groupZip': 'chkgroup chkrequired chkzip',
			'pref': 'chkselect',
			'faddress': 'chkrequired',
			'groupTel': 'chkgroup chkrequired chktel',
			'youremail': 'chkrequired chkemail',
			'reemail': 'chkrequired chkretype-youremail'
		}
	});
} );
</script>

Contact Form 7

後はContac Form 7のフォームを設置するだけ（ショートコードが実行されてしまうので、下記の例では[ ]で囲まれた中身の前後にスペースが入っています）。

// テンプレートに埋め込む場合
<?php echo do_shortcode( '[ contact-form-x id="xxxx" title="フォーム" ]' ); ?>

// 記事に埋め込む場合
[ contact-form-x id="xxxx" title="フォーム" ]

Contact Form7のバリデーションとexValidationのバリデーションが喧嘩しないか心配でしたが、そんなこともなくexValidationのバリデーションがうまく動いてくれます。