【WordPress】Contact Form7にリアルタイムバリデーションを入れる方法
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># 補足
ちょっとだけ補足すると、１つ目のスクリプトは日本語対応用の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>