あなたのキモチ つなげるカタチ

TOP > jQuery > 【jQuery】jQuery-Validation-Engineを利用したリアルタイムバリデーション

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

現在、ほとんどのコーポレートサイトにお問合せフォームが存在しています。
お問合せフォームにはバリデーション機能がついていることが多く、入力内容に不備がある場合はエラーメッセージが表示されます。
弊社ではバックエンドエンジニアが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-1.11.3.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の記述方法

下記のように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": /[?!.0-9].*$/,
   "alertText": "丁目・番地・号等は全角数字(0~9)で入力してください。"
},
"city-02-kana-01": {
   "regex": /^[ァ-ヶ|-|0-9| ]+$/,
   "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
バルーン出現後、一定時間を経過すると非表示へ

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

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