メールフォームや申し込みフォームを作成した際に、必須項目の入力確認やメールアドレスの書式などの入力チェックをすることをフォーム・バリデーション(Form Validation)と呼びます。
HTML5からは標準機能としてフォーム・バリデーションが追加されたので、HTMLタグだけで入力項目のチェックが行えますが、よりわかりやすく便利なバリデーション機能を追加したい場合には「jQuery-Validation-Engine」がオススメです。
PCからスマホまで全てのデバイスで動作し、見やすい吹き出しによるエラー内容の表示や、入力エラーの箇所にスムーズスクロールして再入力をうながしてくれるのでとてもわかりやすいです。
というわけで「jQuery-Validation-Engine」の設定方法とカスタマイズ方法を解説します。
設定方法
jQuery-Validation-Engineを利用するには以下の4つが必要です。
- jQuery
- jQuery-Validation-Engine用のCSS（validationEngine.jquery.css）
- jQuery-Validation-Engine本体（jquery.validationEngine.js）
- jQuery-Validation-Engine日本語化ファイル（jquery.validationEngine-ja.js）
CDNを利用してセットアップするか、作者のページでjQuery-Validation-Engine-master.zipをダウンロードして任意の場所（jsフォルダおよびcssフォルダ）等にアップロードします。
■cdnjs – jQuery-Validation-Engine
URL: https://cdnjs.com/libraries/jQuery-Validation-Engine
■jQuery – Download
URL: https://jquery.com/download/
■GitHub – jQuery-Validation-Engine
URL: https://github.com/posabsolute/jQuery-Validation-Engine
CSS
|
1 2 3 4 5 |
■CDNを利用する場合 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css"> ■手動で直接アップロードする場合 <link rel="stylesheet" href="css/validationEngine.jquery.css"> |
jQueryとjQuery-Validation-Engine読み込み
|
1 2 3 4 5 6 7 8 9 |
■CDNを利用する場合 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.js"></script> ■手動で直接アップロードする場合 <script src="js/jquery-3.3.1.min.js"></script> <script src="js/jquery.validationEngine.js"></script> <script src="js/languages/jquery.validationEngine-ja.js"></script> |
HTML
テキストボックス、ラジオボタン、セレクトボックス、チェックボックス、テキストエリアでバリデーションを設定してみます。
- <form>タグにはお好きなIDを指定してnovalidate属性を付けます。
- <input>タグにはclassでvalidate[required]を指定します。
|
1 2 3 4 5 |
<form id="form-name" novalidate> ■テキストボックス:<br> <input type="text" name="テキスト" class="validate[required]"><br> <button type="submit">送信</button> </form> |
JavaScript（初期設定）
3行目にバリデーションを行うフォームのIDを入力します。（例としてform-nameにしてあります。）
|
1 2 3 4 5 |
<script> $(document).ready(function () { $("#form-name").validationEngine(); }); </script> |
これで「jQuery-Validation-Engine」によるフォームバリデーションが動きます。
デモ
See the Pen
zbBgZz by Ketsunosuke (@onoredekaiketsu)
on CodePen.
フォームの入力形式ごとの設定例
上記の例ではテキスト入力しか設定していませんが、ラジオボタンやセレクトボックス、チェックボックスなどのバリデーションも行えます。
テキストボックス、ラジオボタン、セレクトボックス、チェックボックス等を全て利用したサンプルを作成してみます。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<form id="form-name" novalidate> 【お名前】: <input type="text" name="お名前" class="validate[required]"> <hr> 【メールアドレス】: <input type="email" name="メールアドレス" class="validate[required,custom[email]]"> <hr> 【電話番号】: <input type="phone" name="電話番号" class="validate[required,custom[phone]]"> <hr> 【ブログURL】: <input type="url" name="ブログURL" class="validate[required,custom[url]]"> <hr> 【年齢】: <input type="number" name="年齢" class="validate[required,custom[number]]"> <hr> 【性別】: <input type="radio" name="性別" value="男性" class="validate[required]"> 男性 <input type="radio" name="性別" value="女性" class="validate[required]"> 女性 <hr> 【血液型】: <select name="血液型" class="validate[required]"> <option value="">▼選択して下さい</option> <option value="A">A型</option> <option value="B">B型</option> <option value="O">O型</option> <option value="AB">AB型</option> </select> <hr> 【趣味】: <input type="checkbox" name="趣味" class="validate[minCheckbox[1]]"> 読書 <input type="checkbox" name="趣味" class="validate[minCheckbox[1]]"> 旅行 <input type="checkbox" name="趣味" class="validate[minCheckbox[1]]"> ショッピング <input type="checkbox" name="趣味" class="validate[minCheckbox[1]]"> スポーツ観戦 <hr> 【備考・コメント】:<br> <textarea name="備考・コメント" class="validate[required]"></textarea> <hr> <br> <button type="submit">送信</button> </form> |
設定内容
| 項目名 | タグ | 設定内容 |
|---|---|---|
| フォーム設定 | <form> | IDを指定してnovalidate属性を追加 |
| お名前 | <input type=”text”> | クラスにvalidate[required] |
| メールアドレス | <input type=”email”> | クラスにvalidate[required,custom[email]] |
| 電話番号 | <input type=”phone”> | クラスにvalidate[required,custom[phone]] |
| ブログURL | <input type=”url”> | クラスにvalidate[required,custom[url]] |
| 年齢 | <input type=”number”> | クラスにvalidate[required,custom[number]] |
| 性別 | <input type=”radio”> | クラスにvalidate[required] |
| 血液型 | <select> | クラスにvalidate[required] |
| 趣味 | <input type=”checkbox”> | クラスにvalidate[minCheckbox[1]] ※最低でも1つ選択（数字で最低チェック数を指定） |
JavaScript
|
1 2 3 4 5 6 7 |
<script> $(document).ready(function () { $("#form-name").validationEngine('attach', { promptPosition: "bottomLeft" //アラートの吹き出しを左下に設定 }); }); </script> |
デモ
See the Pen
bZwBEw by Ketsunosuke (@onoredekaiketsu)
on CodePen.
アラートの位置のカスタマイズ
JavaScriptの部分のpromptPosition:の値を変更するとアラートの吹き出しの位置が変更できます。（デフォルトは右上です。）
| 吹き出しの位置 | promptPosition:の値 |
|---|---|
| 左上 | topLeft |
| 右上 | topRight |
| 左下 | bottomLeft |
| 中央下 | centerRight |
| 右下 | bottomRight |
その他のカスタマイズ方法
作者のGitHubのドキュメントに様々なカスタマイズ方法が記載されていますので、色々とチャレンジしてみてください。
■jQuery-Validation-Engine/README.md
URL: https://github.com/posabsolute/jQuery-Validation-Engine/blob/master/README.md
■Nicer documention
URL: http://posabsolute.github.io/jQuery-Validation-Engine/
備考
送信ボタンを押した際に入力チェックは行われるが、入力エラーの箇所にスクロールしないというケースがあります。
その際の原因は、ページで利用している他のJavaScriptのスクロール制御(animate)が競合しているというパターンが多いです。（※TOPへ戻るボタンのスクロールやページ内リンクのスクロール制御などと競合すると動かない場合がある。）
そんな時は「jQuery-Validation-Engine」のスクロール制御をOFF（scroll:false）にすると競合が無くなって正常に動作しますので試してみて下さい。
まとめ
見栄えの良いフォーム・バリデーションを手軽に実装したい場合は、「jQuery-Validation-Engine」を利用しましょう。
フォーム入力時の離脱率の低下も間違いなしです。
