GravityFormsでページ遷移を伴わない動的バリデーションを行う

一般的にWebフォームでバリデーションを行う際には、フォーム入力を行い送信ボタンをクリックして入力のバリデーションを行います。
しかし、入力欄の種類によってはフォームを送信する前に確認メッセージを表示した方が、訪問者が簡単にフォームを送信できるようになります。

GravityFormsでページ遷移を行わずにバリデーションを行う方法として簡単なのはJquery Validation For Gravity Formsプラグインを使用する方法です。

目次

Jquery Validation For Gravity Formsとは

Jquery Validation For Gravity Formsのサイト

Jquery Validation For Gravity Formsとは以下のような特徴を持つプラグインです。

  • GravityFormsでJqueryを使用してページ遷移を行わずにバリデーションを行うことができる
  • Jquery Validation For Gravity Formsプラグインは有償
  • 購入するライセンスは買い切りのみ
  • WooCommerceとGravityFormsを連携するGravity Forms Product Add-onsプラグインに対応済み

ライセンスの種類と価格

ライセンスの種類と価格は以下の通りとなります。（2022年7月4日現在）

パーソナルライセンス

$19.99

  • 1 サイト
  • 生涯ライセンス / 買い切り
  • プレミアムサポート
  • 30日間の返金ポリシー

ビジネスライセンス

$49.99

  • 5 サイトまで
  • 生涯ライセンス / 買い切り
  • プレミアムサポート
  • 30日間の返金ポリシー

コーポレートライセンス

$99.99

  • サイト数無制限
  • 生涯ライセンス / 買い切り
  • プレミアムサポート
  • 30日間の返金ポリシー

サイト数無制限のコーポレートライセンスでも約100ドルで買い切りなので購入しやすいと思います。

Jquery Validation For Gravity Formsの設定方法

GravityForms のフォームエディターで バリデーションを設定したいフォームの
「フィールド設定 > 外観 > カスタム CSS クラス」に url, date, dateiso, number, digits, creditcard, phoneUS など、バリデーションしたいルールのCSSクラスを追加することでカスタムバリデーションが追加できます。

右下のカスタムCSSクラスにCSS名を追加する

バリデーションの種類と設定するclassの名称、設定されているスタイルのテーマは以下の記事を参照してください。

Jquery Validation For Gravity Forms
Jquery Validation For Gravity Formsのバリデーションルールとスタイル

Jquery Validation For Gravity Formsのバリデーションルールとスタイルテーマの種類をご紹介します。

Read more

エラーメッセージの変更

エラーメッセージはデフォルトでは英語で設定されています。
そのため、日本語環境ではエラーメッセージを変更する必要があります。
エラーメッセージの変更方法は以下の通りです。

  1. WordPressの管理画面で、Jquery Validation for Gravity Form を選択します。
  2. 「Error Message（エラーメッセージ）」タブで、必要なメッセージを変更します。
  3. 「Save Changes（変更を保存する）」をクリックします。
Jquery Validation for Gravity Formsのエラー文言設定画面

エラーメッセージの日本語サンプル

以下に日本語のサンプルを記載しておきますので適時必要に応じて入れ替えてください。

  • Required
    このフィールドは必須です。
  • Email
    有効なメールアドレスを入力してください。
  • Url
    有効なURLを入力してください。
  • Date
    有効な日付を入力してください。
  • Date ISO
    有効な日付(ISO)を入力してください。
  • Numbers Only
    有効な数値を入力してください。
  • Digit only
    数字のみを入力してください。
  • Alphanumeric
    アルファベット、数字、アンダースコアのみを入力してください。
  • Lettersonly
    アルファベットのみを入力してください。
  • Letters Space
    アルファベットとスペースのみを入力してください。
  • Credit Card
    有効なクレジットカード番号を入力してください。
  • US Phone number
    有効な米国内の電話番号を指定してください。
  • UK Phone number
    有効なイギリス国内の電話番号を指定してください。
  • UK Mobile Phone number
    有効なイギリス国内の携帯電話番号を指定してください。
  • StateUS
    有効な米国の州を指定してください。
  • Ipv4
    有効なIP v4アドレスを指定してください。
  • Ipv6
    有効なIP v6アドレスを指定してください。
  • Equal To
    同じ値をもう一度入力してください。
  • File Extension
    有効な拡張子を持つファイルを入力してください。
  • Require From Group
    これらのフィールドのうち少なくとも{0}を入力してください。
  • Max Length
    {0}文字以下で入力してください。
  • Min Length
    少なくとも {0} 文字以上を入力してください。
  • Range Length
    {0}から{1}文字までの長さの値を入力してください。
  • Range
    {0}から{1}の間の値を入力してください。
  • Max
    {0}以下の値を入力してください。
  • Min
    {0}以上の値を入力してください。
  • Iban
    有効なIBANをご指定ください。
  • Bic
    有効なBICコードをご指定ください。
  • Check Username
    ユーザー名が存在しません。
  • Email Verification
    電子メール認証コードが一致しません。

カスタムコードの設定方法

カスタムコードはフォームで使用する前にあらかじめカスタムコードを登録しておく必要があります。
以下はカスタムコードの新規登録方法です。

  1. WordPressの管理画面で、Jquery Validation for Gravity Form を選択します。
  2. 「Custom Code（カスタムコード）」タブで、「Add Custom Code」ボタンをクリックします。
  3. Add Custom Code画面でカスタムコードを入力します。
  4. 「Save Changes（変更を保存する）」をクリックします。
カスタムコードタブ

設定する項目

  • Reference Name *（参照名）
    カスタムコードに名前を付けます。例えば、「顧客認証コード」のようにわかりやすいものにします。
  • Custom Codes (1 code per line) *（1行に1コード）
    この入力欄に、一行に一つコードを入力します。
    ここに入力したコードとユーザーがフォームで入力したコードを検証して一致しているかどうかを判定します。
  • One time use only ? *（1度使用したら無効にする）
    認証コードを一度使用したら使い捨てにするかどうかを設定します。
    No　Form ID　Field ID
    「Yes」（コードを使い捨てにする）の場合、この認証コードを使用するフォームとフィールドIDを控えておいてください。
  • Invalid Message *：
    コードが一致しなかった場合のエラーメッセージをここに入力します。
    例：コードが一致しません。有効なコードを入力してください。

上記全てを入力したら「Save Custom Code」ボタンをクリックして保存します。
保存するとリストに表示されます。 リストにバリデーションを適用する際に必要なクラス名（Custom Code Class）が表示されます。
Custom Code Classに表示されたクラス名をフォームのフィールドに入力し、一致することを確認してください。

登録したカスタムコードが一覧に表示される

Custom Regex（正規表現）の設定方法

正規表現を使ってバリデーションを行いたい場合は、以下の方法で正規表現をあらかじめ登録しておく必要があります。

  1. WordPressの管理画面で、Jquery Validation for Gravity Form を選択します。
  2. 「Custom RegEx Validation（カスタム正規表現）」タブで、「Add Custom Regex」ボタンをクリックします。
  3. Add Custom Regex画面でカスタムコードを入力します。
  4. 「Save Changes（変更を保存する）」をクリックします。
カスタム正規表現タブ

カスタム正規表現を使用するには、正規表現の知識が必要です。

設定する項目

  • Reference Name *（参照名）
    正規表現に名前を付けます。例えば、「日本の電話番号」のようにわかりやすいものにします。
  • Regex *
    以下の入力欄に正規表現を入力します。
    /　　　　/i
  • Invalid Message *
    入力規則が一致しなかった場合のエラーメッセージをここに入力します。
    例：入力した値と入力規則が一致しません。有効な値を入力してください。

上記全てを入力したら「Save Custom Regex」ボタンをクリックして保存します。
保存するとリストに表示されます。 リストにバリデーションを適用する際に必要なクラス名（Custom Regex Class）が表示されます。
Custom Regex Classに表示されたクラス名をフォームのフィールドに入力し、一致することを確認してください。

登録したカスタム正規表現が一覧に表示される

Emailコード認証の設定

入力したEmailアドレスが有効なものなのかを検証するEmail認証コードの設定は以下の様にして行います。

  1. WordPressの管理画面で、Jquery Validation for Gravity Form を選択します。
  2. 「Email Verification（Email認証）」タブで、必要なメッセージを変更します。
  3. 「Save Email Verification settings（Email認証設定を保存する）」をクリックします。
Email認証の設定画面

設定項目

  • Verify Code Input Label：
    認証コードの入力を行うフォームフィールドのラベルを入力します。
    例：認証コードの入力
  • Subject：
    メールの表題に使う文章を入力します。ユーザーが混乱を来たさないようにわかりやすく入力します。
    例：XXX Webサイトより -認証コードのお知らせ-
  • Email Body：
    認証メールの本文に表示する文章を記載します。
    [CODE]の部分は自動的に置き換えられますのでそのまま入力してください。

    本文の例：
本メールは「XXX Webサイト」の認証メールです。
下記の認証コードを「認証コードの入力」欄に入力してください。

・認証コード
 [CODE]

※ご注意
本メールにお心当りがない場合には認証コードは入力しないでください。
本メールは送信専用となっているため、返信いただいてもご回答することができません。
ご不明な点がある場合はお手数ですがお問い合せフォームよりご連絡ください。

投稿者プロフィール

DoL（CMSラボ所長）DoL（CMSラボ所長）
CMS Laboの所長。
所員はまだない。

DoLは Director of Laboratories の略です。
カテゴリー
Jquery Validation For Gravity Forms

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


前の記事
Gravity Forms公式アドオン一覧
2022年8月24日
次の記事
Jquery Validation For Gravity Formsのバリデーションルールとスタイル
2022年8月30日