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

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

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

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でも動きます。

HTML

テキストボックス、ラジオボタン、セレクトボックス、チェックボックス、テキストエリアでバリデーションを設定してみます。

  • <form>タグにはお好きなIDを指定してnovalidate属性を付けます。
  • <input>タグにはclassでvalidate[required]を指定します。

JavaScript(初期設定)

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

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

デモ

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

スポンサーリンク

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

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

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

HTML

設定内容

項目名 タグ 設定内容
フォーム設定 <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

デモ

See the Pen
bZwBEw
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 というふうに記載してピクセル単位で左右のオフセットも設定できます。
スポンサーリンク

その他のカスタマイズ方法

作者の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」を利用しましょう。

フォーム入力時の離脱率の低下も間違いなしです。