フォームの入力チェックは、JavaScriptでリアルタイムにできると便利

ウェブ上のフォームに何らかの入力をするとき、一旦送信してからエラーを表示されるよりも、その場でリアルタイムに入力ミスを指摘してくれる方が便利です。その方がページを移動する手間が省けますし、戻る際に入力内容が消えてしまう心配もなくなるからです。

送信後にページ移動してからエラーが出ると戻るのが面倒(左)/入力と同時にエラーを表示してくれると楽(右)

送信後にページ移動してからエラーが出るとページを戻るのが面倒(左)/入力と同時にエラーを表示してくれると楽(右)


フォームへ入力された内容のチェック機能を自力で作るのはかなり面倒です。入力チェックを簡単に実施できるスクリプトがたくさん公開されていますので、それらを活用するのが良いでしょう。


 
例えば、下図のように、入力内容のミスをリアルタイムにバルーンの形で表示してくれるスクリプトがあります。このようなスクリプトを使うと、入力チェック機能を楽に用意できますし、ユーザにとってもミスの把握が簡単で便利です。

入力内容や選択内容が、指定した条件に合いたしているかどうかを、その都度(ほぼリアルタイムに)判断して、エラーがあればバルーンに表示してくれるスクリプト。

入力内容や選択内容が、指定した条件に合いたしているかどうかを、その都度(ほぼリアルタイムに)判断して、エラーがあればバルーンに表示してくれるスクリプト。


このような入力チェックスクリプトの1つとして、今回は「jQuery-Validation-Engine」の使い方をご紹介いたします。入力や選択の直後に自動でチェックされて、バルーン型(ツールチップのような形)で見やすくエラー箇所を指摘でき、かつ、最初から日本語にも対応している便利なスクリプトです。

入力チェック結果をバルーンで表示:jQuery-Validation-Engine

jQuery-Validation-Engineは、JavaScriptの有名ライブラリであるjQueryを活用した入力チェックスクリプトです。このスクリプト活用すると、以下のようなメリットが得られます。

半透明のバルーンに、入力チェック結果を見やすく表示できる
エラーは半透明のバルーンに表示

エラーは半透明のバルーンに表示

入力された内容をチェックした結果は、図のように半透明のバルーン(吹き出し)として、入力位置のすぐそばに表示されます。

問題のある箇所が一目瞭然ですし、エラーメッセージ自体が余計な空間を占有しません。バルーンが設問に重なって表示される場合もありますが、邪魔であればバルーンをクリックするだけで消せるため、困ることはないでしょう。


 
入力内容をほぼリアルタイムにチェックできる
選択した瞬間・入力直後に自動チェック

選択した瞬間・入力直後に自動チェック

テキスト入力欄に入力された内容は、ユーザがテキスト入力欄から出た瞬間にチェックが行われます。チェックボックスやラジオボタンの場合は、ユーザがクリックした瞬間にチェックが行われます。

このように、ほぼリアルタイムにチェックされるため、ミスがある場合の再入力が楽です。なお、送信する直前にも一括チェックが行われるため、チェック漏れは起きません。


 
文字数・文字種・選択個数・日付・URLなど、様々なチェック形態を網羅
様々な形式のチェックができる

様々な形式のチェックができる

必須項目への入力チェック、指定文字数を満たしているかどうかのチェック、選択個数が制限に沿っているかどうかのチェック、数値が指定通りかどうかのチェック、URL・メールアドレス・電話番号・日付が正しく入力されているかどうかのチェック……など、フォームで必要となる多くのチェック機能が用意されています。


 
入力チェック結果のエラーメッセージを日本語でも表示できる
様々な言語での表示に対応

様々な言語での表示に対応

日本語化のためのJavaScriptも最初から用意されているため、何もカスタマイズすることなく入力チェック結果を日本語で表示できます。

※複数の言語に対応しているため、英語や日本語以外のエラーメッセージも表示できます。


 
チェックボックスとテキスト入力欄など、複数の項目を組み合わせたチェックも可能
複数の入力欄を組み合わせたチェックなどもできる

複数の入力欄を組み合わせたチェックなどもできる

チェックボックスやラジオボタンを使って選択肢を提示する際、最後に「その他」という項目を用意しておき、そこが選択された場合にだけ、隣のテキスト入力欄に文字を入力して欲しい……という場合もよくあります。そのような複数の入力欄を組み合わせたチェックも可能です。この場合、「その他」欄が選択されていなければ、入力欄が空でも警告はされません。

そのほか、プルダウンメニューやセレクトボックスに対してもチェックを実施できます。

以上のように、jQuery-Validation-Engineを使うとリアルタイムでの様々な入力チェックが簡単に実施できます。とても便利ですから、ウェブ上に何らかのフォームを用意する際にはぜひ活用してみて下さい。今回は、このスクリプトの設置方法や使い方を詳しくご紹介いたします。

【使用手順】
1. jQuery-Validation-Engineを読み込む方法(CDN経由/ダウンロードして設置) (p.2)
2. jQuery-Validation-Engineを使って入力チェックの指示を記述する基礎 (p.3)
3. jQuery-Validation-Engineでのチェック条件の記述方法 (テキスト入力欄編) (p.4)
4. jQuery-Validation-Engineでのチェック条件の記述方法 (複合編) ・動作サンプル (p.5)