リアルタイムバリデーション機能について

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のスコアの低下は確認できませんでした。

なのでリアルタイムバリデーションによってスパム判定されてフォームの送信が失敗することはないと考えて頂いて大丈夫です。