【Contact Form 7】リアルタイムで必須項目の未入力や不適正値を検証・背景色や枠色を変える方法【jQuery-Validation-Engine】 | webico blog

こんにちは、しばです。 WordPressでフォームを入れるとき、Contact Form 7によくお世話になっています。 Contact Form 7は標準でエラーチェックが出来るんですが、ここをもうちょっとカスタマイズしたいなぁというときはないでしょうか？ 今回は、 必須項目が未入力だった場合 入力されたが不適正値だった場合（例： type=”tel”で数字以外の文字が入力される） こういった時、リアルタイムで（入力直後に）注意メッセージを表示させたい。また、その際に入力項目の背景色や枠色を変えたいと思いました。 入力項目のステータス変化に関してはcssで単体で:requiredや:validで装飾できますが、できたらリアルタイム表示のエラーメッセージに紐づけたいところ。 ということで、Contact Form 7 + jQuery-Validation-Engineの実装方法からスタ