【jQuery】jQuery-Validation-Engineを利用したリアルタイムバリデーションの実装方法

今回はWeb制作におけるjQueryの実装に関する内容です。
現在、ほとんどのコーポレートサイトには「お問合せフォーム」が存在します。
お問合せフォームにはバリデーション機能が備わっていることが多く、この機能があると入力内容で不備がある場合にエラーメッセージが表示されます。
勤務している制作会社ではバックエンドエンジニアがPHPで実装することが多いのですが、
先日の案件で「フロント側で簡易的なバリデーション機能を実装してほしい」といった要望を受けました。

jQuery-Validation-Engineの使い方

フロントでフォームのバリデーション機能を実装するにはjQuery-Validation-Engineが使いやすいとの情報を入手したので使用しました。
jQuery-Validation-Engineは入力内容のミスをリアルタイムでチェックしくれるとともに、誤りがあるとエラーメッセージをバルーンで表示してくれます。

プラグインは下記リンク先より取得できます。
https://github.com/posabsolute/jQuery-Validation-Engine

使い方をイチから解説すると長くなるので、詳しい設定方法は下記の参考記事でご確認ください。非常に丁寧に解説をされています。
https://allabout.co.jp/gm/gc/420327/3/

jQuery-Validation-Engineの初期設置

まずはjQuery-Validation-Engineを動かすのに必要なcssとjsファイルを読み込ませます。

<link rel="stylesheet" href="validationEngine.jquery.css">
<script src="/js/jquery-3.2.1.min.js"></script>
<script src="js/jquery.validationEngine.js"></script>
<script src="js/jquery.validationEngine-ja.js"></script>

jQuery-Validation-Engineにはバルーン位置を制御できるオプションもありますが
今回は個別に位置を指定したいのでデモページではerror.css内に調整する記述をしています。

jQuery-Validation-Engineの記述方法

>> DEMOはこちらから！

>> ページの読み込みが遅い場合はこちら

下記のようにinputタグのclassへvalidate[処理内容]という記述をすることでバリデーションの対象となります。

<input class="validate[required, custom[post-01]]">

この処理内容の部分ですが
必須であればclass=”validate[required]”
任意であればclass=”validate[optional]”
という記述になります。

class="validate[required, custom[任意の名称]]"

また、上記のように
custom[オリジナル項目]
という形で独自の条件を設定できます。

jquery.validationEngine-ja.jsの記述方法

jquery.validationEngine-ja.jsにはエラーメッセージに関する内容を記述しています。

"city-02-kanji-01": {
   "regex": /^[^\x01-\x7E]+$/,
   "alertText": "「町名以下（漢字）」を全角文字で正しく入力してください。"
},
"city-02-kanji-02": {
   "regex": /[?!.０-９].*$/,
   "alertText": "丁目・番地・号等は全角数字（０～９）で入力してください。"
},
"city-02-kana-01": {
   "regex": /^[ァ-ヶ|－|０-９|　]+$/,
   "alertText": "「町名以下（カナ）」を全角文字で正しく入力してください。"
}

上記のように
regexにはエラー条件
alertTextにはエラーメッセージ
が設定されています。

alertTextには正規表現でエラー条件を設定しています。
正規表現は下記のページを参考に設定しました。
http://daipresents.com/2008/java_regex/
http://www.tohoho-web.com/js/regexp.htm
http://www.megasoft.co.jp/mifes/seiki/index.html

その他

GitHubにあるプラグインの解説ページを見ると数多くのオプションが設定されていることが分かります。デモページでは下記のオプションをfalseからtrueに切り替えて有効化しています。

autoPositionUpdate

ウインドウサイズを変更する度に自動でバルーンの位置調整を行う

autoHidePrompt

バルーン出現後、一定時間を経過すると非表示へ

デモページでは下記のスクリプトも同時に実装しています。

• ・全角英数字を半角英数字へ
• ・半角文字を全角文字へ
• ・半角カタカナ→全角カタカナ

この記事を書いた人（著者情報）

片山

カタチップ編集長。昭和生まれの30代でWeb業界歴は10年以上。現在はカタチップを運用しつつ事業会社でWEBメディアサイトのWebディレクター兼マークアップエンジニアを担当。最近はSNSの運用にも業務範囲を拡大中です。