フォームの入力項目のチェック(バリデーション)を行ってくれるJS

メールフォームや申し込みフォームを作成した際に、必須項目の入力確認やメールアドレスの書式などの入力チェックをすることをフォーム・バリデーション(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

■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読み込み

※CDNのjQuery-Validation-Engine ver2.6.4を利用する場合はjQueryの3.0.0以上には対応していないので、jQueryは2系の最新版2.2.4を利用して下さい。（jQuery3.0.0以上を利用するとセレクトボックスとチェックボックス、ラジオボタン等でエラーが出ます。）

※手動で直接アップロードする場合は作者のGitHubからjQuery-Validation-Engine-master.zipをダウンロードして解凍したフォルダ内にあるjquery.validationEngine.jsをアップロードすれば最新のjQuery-3.3.1でも動きます。

■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]を指定します。

<form id="form-name" novalidate>
■テキストボックス:<br>
<input type="text" name="テキスト" class="validate[required]"><br>
<button type="submit">送信</button>
</form>

JavaScript（初期設定）

3行目にバリデーションを行うフォームのIDを入力します。（例としてform-nameにしてあります。）

<script>  
$(document).ready(function () {
  $("#form-name").validationEngine();
});
</script>

これで「jQuery-Validation-Engine」によるフォームバリデーションが動きます。

デモ

See the Pen Untitled by Ketsunosuke (@onoredekaiketsu) on CodePen.

フォームの入力形式ごとの設定例

上記の例ではテキスト入力しか設定していませんが、ラジオボタンやセレクトボックス、チェックボックスなどのバリデーションも行えます。

テキストボックス、ラジオボタン、セレクトボックス、チェックボックス等を全て利用したサンプルを作成してみます。

HTML

<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

<script>  
$(document).ready(function () {
  $("#form-name").validationEngine('attach', {
    promptPosition: "bottomLeft" //アラートの吹き出しを左下に設定
  });
});
</script>

デモ

See the Pen Untitled by Ketsunosuke (@onoredekaiketsu) on CodePen.

アラートの位置のカスタマイズ

JavaScriptの部分のpromptPosition:の値を変更するとアラートの吹き出しの位置が変更できます。（デフォルトは右上です。）

吹き出しの位置	promptPosition:の値
左上	topLeft
右上	topRight
左下	bottomLeft
中央下	centerRight
右下	bottomRight

※個別に吹き出しの位置を設定したい場合は<input>タグ内にdata-prompt-position="bottomLeft"などと設定してもOKです。
【例】<input type="text" name="xxx" class="validate[required]" data-prompt-position="bottomLeft">

更に細かく吹き出しの位置を設定したい場合は、bottomLeft:-100 というふうに記載してピクセル単位で左右のオフセットも設定できます。