Contact Form 7専用プラグイン「Jquery Validation For Contact Form 7」

Web制作

こんにちは。

私はある案件を担当しているときに、Contact Form 7 にリアルタイムでチェックするバリデーションを導入しようとしました。

早速、ブラウザで検索したところ、「jQuery Validation Engine」に行きついたので、担当している案件に導入してみました。

すると、私にとってはいくつかの問題点が見えてきました。

私にとっての問題点とは?

私は、全てのバリデーションチェックを、jQuery Validation Engine側で実施したいと考え、Contact Form 7 側の必須属性は全て外しました。

そして、jQuery Validation Engineで必須属性をコントロールするようにしました。

フォームを設置して動作確認をします。

すると、バリデーションは行われているが、結果に関係なく、formが送信されてしまいました。

Jquery Validation For Contact Form 7

私は、問題点を修正する為に、いくつかのことを試したが、どれもがスマートなやり方ではありませんでした。

再びweb上を調べた結果、一つの解決策を見つけることができました。

それが、Contact Form 7 専用プラグイン「Jquery Validation For Contact Form 7」です。

Jquery Validation For Contact Form 7は、Contact Form 7 に最適化された、
オープンソースソフトウェアとなっています。詳しくはこちら

プラグイン導入方法

1.wordpress管理画面 > プラグインメニューを選択

2.上部にある「新規追加」を選択

3. 検索バーで「Jquery Validation For Contact Form 7」を検索

プラグインJquery-Validation-For Contact-Form7

プラグイン設定方法

基本的には、チェックする対象に、専用の「class」をつけることで、バリデーションを適応します。

だたし、いくつかの検証方法は、設定をすることなく、デフォルトで機能することを覚えておきましょう。

ここでは、無料のLite版の中から、よく使われるものを抜粋しました。詳しくはこちら

1.必須属性

必須属性を検証するのに、プラグイン側で設定することはありません。Contac Form 7側で必須属性にチェックを入れるだけです。

2.メール検証

メールを検証するには、Contact Form 7側で、メールフィールドを使用します。プラグイン側で設定することはありません。

3.URL検証

urlを検証するには、class:url を対象のフィールドに追加します。

[[text your-subject class:url]] 

4.日付の検証

日付を検証するには、class:dateを対象のフィールドに追加します。

[[text your-subject class:date]]

5.数値検証 ( 少数点を許可 )

少数点を含む、数値を検証するには、class:numberを対象のフィールドに追加します。

[[text your-subject class:number]]

6.数字のみ検証

数値のみを検証するには、class:digitsを対象のフィールドに追加します。

[[text your-subject class:digits]]

プラグインの問題点

Jquery Validation For Contact Form 7 は、スマートにリアルタイムでバリデーション 機能を実装してくれる、優れたプラグインです。

ただし、日本語対応が不完全なので、エラーメッセージが英語になってしまいます。

一応、有料版には、エラーメッセージの編集ができる機能があるようです。詳しくはこちら

私は試していないので、確実にできるとは言えないですが、、。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

関連記事

特集記事

コメント

この記事へのコメントはありません。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

TOP