【ユーザビリティ向上】リアルタイムにフォームの入力チェック!jQuery Validation Engine

ウェブ制作技術

jQuery リアルタイムに入力チェック

週のまんなかにこんにちは、樋口です。

世間はいよいよ初夏といった風合いですが、みなさまいかがお過ごしでしょうか?
そうめん食べてますか?軒先に風鈴を掛けましたか?ウェブサイトのユーザビリティを向上させてますか?

というわけで、本日はフォームのユーザビリティを向上させるjQueryプラグイン「jQuery Validation Engine」のご紹介です。

設置は簡単で効果てきめん、コストパフォーマンスが非常にいい代物です。

jQuery Validation Engineの設置

jQuery Validation Engineの配布ページの右下「Download ZIP」をクリックしてダウンロードしたzipを解凍します。

jQuery Validation Engine

いろんなファイルが入っているのですが、基本必要なものは下記です。

  • js/jquery-1.8.2.min.js(jQuery本体)
  • js/jquery.validationEngine.js
  • js/languages/jquery.validationEngine-ja.js(日本語用のファイル)
  • css/validationEngine.jquery.css

上記をページに読み込みましょう。

jsフォルダ、cssフォルダにそれぞれ配置しました。

実行するjsを記述

必要ファイル群を読み込んだら、そのあとにscriptタグで実行するためのjsを記述します。

例えばformタグのidが「form_entry」だとすると、こうなります。

これだけ。

オプションもあるので、詳しくは本家サイトまで。

formの各要素にclassを追加

js側の準備ができたので、あとはチェック対象のhtmlに所定のclassを追加すればOKです。

例えば入力必須のチェックであれば、下記のような感じに。

その他、メールアドレスやURLの形式チェックや、文字数、文字種(英数とか)、同じ値が入っているかのチェックなどがあります。

  • 形式チェック(メールアドレス):validate[custom[email]]
  • 形式チェック(URL):validate[custom[url]]
  • 文字数チェック:validate[minSize[20],maxSize[60]]
  • 文字種チェック(英数字のみ):validate[custom[onlyLetterNumber]]

複数のチェックを同時に指定する場合、[]の中身をカンマ区切りで記述します。
例えば、入力必須 + メールアドレス のチェックであれば下記のように記述します。

簡単に、高機能な入力チェックが実装できます。すてきです。
エラーメッセージの表示は、下記のように赤い吹き出しで、ぽん、と浮かび上がってくるので、とてもわかりやすいです。

赤い吹き出しでわかりやすいエラー表示

赤い吹き出しでわかりやすいエラー表示

下記にて詳しく解説されています。ありがとうございます。
http://allabout.co.jp/gm/gc/420327/


以上、フォームのユーザビリティ向上のための、jQueryプラグインの紹介でした。
フォーム入力し終わったあとに、どばっとエラーメッセージが出ると、萎えますよね。

こういう技術を駆使して、ウェブと人の良好な関係を築いていきたいものです。
それではまた!

あなたのビジネスのWeb戦略を、ぜひキタックにおまかせください。

効果を出すためのサイト運営、集客できるウェブ広告

ブログの更新情報をお知らせしています。