Written by Manabu Bannai

【WordPress】Contact Form7にリアルタイムバリデーションを入れる方法

PROGRAMMING WordPress

WordPressのお問い合わせフォームならContact Form7が定番ですよね。そんなContact Form7にリアルタイムバリデーションをいれる方法をまとめました。

スポンサードサーチ


まずは『jQuery-Validation-Engine』の読み込み

jQuery-Validation-Engineを使います。jQueryがないと動かないので注意しましょう。
» コードのDL(Github)
» デモ

<!-- ValidationEngineのCSS読み込み -->
<link rel='stylesheet' id=''  href='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css' type='text/css' media='all' />

<!-- ValidationEngineのJS読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script>

# 補足
ちょっとだけ補足すると、1つ目のスクリプトは日本語対応用のJSです。

リアルタイムバリデーションを実行する方法

下記コピペでOK。input[name*='your-name']input[name*='text-001']の部分を環境にあわせて変更してください。。

jQuery(function(){
	jQuery("form").validationEngine('attach', {
		scroll: false
	});

	jQuery("input[name*='your-name']").addClass("validate[required]");
	jQuery("input[name*='your-email']").addClass("validate[required,custom[email]]");
	jQuery("input[name*='text-001']").addClass("validate[required]");
	jQuery("input[name*='text-002']").addClass("validate[required]");
	jQuery("input[name*='text-003']").addClass("validate[required]");

});

おまけ:好みに応じでCSS調整しましょう。

背景色を変更するなら、下記の感じでOKです。

<style>
	.formError .formErrorContent,
	.formError .formErrorArrow div {
		background: #FF3366;
	}
</style>