Contact Form 7の入力項目に入力された値をリアルタイムにバリデーション（入力チェック）します。
送信ボタンを押した際に行われるバリデーションと同様のバリデーションを行います。特別な設定は必要ありません。
Wattsのリアルタイムバリデーションの特徴
サーバーでのバリデーション
Ajaxという技術を用いて、サーバーでバリデーションをします。
サーバーでのバリデーションは以下の利点があります。
- Contact Form 7が公式で提供しているバリデーションの仕組みが使える
- 特別な設定が不要
- 独自のバリデーションが必要な場合も対応が簡単
- Contact Form 7が公式で提供しているカスタムバリデーションはサーバーでのバリデーションのみ利用可能
- サーバーでしか確認できないバリデーションにも対応
- DBにアクセスする必要があるバリデーションなど
スクリーンリーダーやWAI-ARIAに対応
Contact Form 7では視覚障害者に配慮したスクリーンリーダーや、アクセシビリティを向上させる技術仕様であるWAI-ARIAが採用されています。
WattsはContact Form 7専用に作っているので、Contact Form 7と同等の基準でそれらに対応します。
仕様
説明が必要な仕様について記載します。
送信するフォームデータ
ファイルを除いたフォームの全てのデータを送信します。
イベントが発生した入力項目のデータだけ送信するわけではありません。
これはContact Form 7のバリデーションフィルターの実装に起因しています。コードを見るとバリデーションに用いる値を$_POST（ポスト変数）から取得しているため、別の入力項目と組み合わせてバリデーションを行うようなケースも想定していることが推測できるからです。
対応外の入力項目
以下の入力項目に対してはリアルタイムバリデーションをしません。
- クイズ
- スパム対策用の入力項目なのでリアルタイムバリデーションしません
- ファイル
- ネットワーク負荷の観点からファイルは送信しないのでバリデーションできません
IE非対応
IEの場合、本スクリプトは読み込まれません。通常のContact Form 7の動作となります。
使用するにあたって考慮してほしいこと
利用規約／プライバシーポリシーの見直し
一般的なフォームでは送信ボタンの直前に（送信するユーザーデータに関する）利用規約／プライバシーポリシーへの同意を得ると思います。リアルタイムバリデーション機能では入力項目へ値が入力されたタイミングでサーバーへユーザーデータを送信します。
つまり、同意する前にユーザーデータを送信します。
そのため、サイト全体の利用規約／プライバシーポリシーに「バリデーション目的でサーバーへユーザーデータを送信する旨」を記載するなど、事前にユーザーの同意を得てください。
サーバー負荷への対応
リアルタイムバリデーション用のリクエストが（最低でも入力項目数分）増加します。一般的にみて重いリクエスト／処理ではありませんが、導入されるサイトの事情はこちらからは分かりません。サイト管理者の方の責任で導入してください。
デザインの見直し
フォームへ入力中のユーザーに対してバリデーションエラーを通知するので、エラーメッセージの分だけ高さがズレます。サーバーのスペックやユーザーの通信状況によってエラーメッセージの表示タイミングが遅れ、UXが悪くなる場合があります。そのようなケースも考慮してデザインを確認してください。
その他
reCAPTCHA v3について
運用実績のあるサイトで確認したところ、リアルタイムバリデーションを導入してもreCAPTCHA v3のスコアの低下は確認できませんでした。
なのでリアルタイムバリデーションによってスパム判定されてフォームの送信が失敗することはないと考えて頂いて大丈夫です。