インタラクション＆エフェクト 3-09
送信前にフォームの内容をチェックする

フォームから送信されるデータの質を高めるためには、データのバリデーションが欠かせない。JavaScriptを利用することで、実際に送信する前に内容のチェックを行おう。

制作・文／高橋としゆき（Graphic Arts Unit）

BROWSER IE…6over　Firefox…3.6over　Safari…4over　Chrome…18over

01

フォームのチェックには、「jqueryvalidation」というjQueryプラグインを用いる。サイト（https://github.com/jzaefferer/jquery-validation）から該当ファイルをダウンロードし、HTMLのhead要素で「jquery.validate.js」を読み込んでおこ【1-1】。

ローカライズファイルの「messages_ja.js」を同時に読み込んでおくと、エラー表示を日本語にできる。なお、この日本語ローカライズファイルは、ダウンロードした内容に含まれる「localization」フォルダ内にある。

【1-1】「jquery-validation」をダウンロードしてHTMLのhead要素で読み込む。

02

プラグインの読み込みに続いて【2-1】のスクリプトを追加しておこう。これが「jquery-validation」を有効にするための記述だ。jQueryセレクタにはバリデートの対象とするform要素を指定しておこう。HTMLのhead要素内にjQueryのreadyメソッドを記述し、その中で定義する。

【2-1】「jquery-validation」の有効化処理。

03

HTMLでフォームを作成する。

フォームは通常通りに作って問題ないが、入力必須にしたいinput要素には「required」のclass名を付加する【3-1】【3-2】。

空欄で送信しようとすると、この要素の直後にエラーメッセージをlabel要素として自動挿入してくれる【3-3】。なお、フォームの要素には「name」属性を必ずつけておこう。

【3-1】これだけで項目は入力必須となり、空欄で送信した場合はエラーメッセージを表示するようになる。

【3-2】今回のフォームデザイン。URL欄以外は入力必須とした。

【3-3】エラーの表示は「error」というクラス名のlabel要素となる。ちなみに、挿入要素の種類などはオプションで自由に変更も可能だ。

04

eメールのinput 要素に「email」というclass名を付加すれば、eメールの書式チェックも可能だ【4-1】【4-2】。

たとえば今回のサンプルでは、全角文字や@の抜けなど、eメールのアドレスとして不適切な場合はエラーが表示されるようになっている。

さらに、「url」のclass名を加えて、URL形式の書式チェックもできる。

このように、「jquery-validation」にはチェックする内容に応じたさまざまな機能が搭載されているので、必要に応じて確認しておこう。

【4-1】eメールには「email」というclass名、URLには「url」というclass名を付加しておけば書式チェックもできる。

【4-2】入力した内容が正しい書式でない場合はこのようにエラーが表示される。

05

複雑なチェックが必要な場合は、head要素内の「jquery-validation」有効化処理にオプションを追加する。この方法を使えば、先に説明した「required」や「email」のclass名を使ったチェックについても、class名を使わず対象を指定することが可能だ。用途に合わせて使いやすい方法を選択しよう【5-1】【5-2】。

なお、「jquery-validation」は豊富なバリデーション機能を有している。詳細は公式サイトのドキュメントなどで紹介されているので確認してほしい。

【5-1】「お客様番号」の項目には文字数のチェック項目を設けた。このような複雑なバリデーションは、プラグインの有効化処理と同時にオプションとして記述する。

【5-2】文字数制限をした項目では、指定した文字数に該当しない場合にエラーを表示する。

06

チェックの結果、エラーのある項目には「error」、エラーのない項目には「valid」など、状況によってフォームの項目にはclass名が自動的に付加される。

これを利用すれば、たとえばエラーの場合は枠の色が変わるなど異なるスタイルにして、違いを視覚的にわかりやすくすることも可能【6-1】【6-2】。

会員登録や問い合わせなど、さまざまな層の人たちが使用することを想定し、できる限りわかりやすいフォームを心がけることで、アクセシビリティやユーザビリティの高いデザインを実現できる。

【6-1】エラーのある項目には「error」、エラーのない項目には「valid」のclass名が自動的に付加される。これを使って状況に応じたスタイルを設定しよう。

【6-2】上段が通常の状態、下段がエラーの状態だ。視覚的にエラー項目をわかりやすくスタイリングした。

[目次に戻る]

【本記事について】
2013年1月29日発売のweb creators特別号「いますぐ悩みが解決する! Webデザイン仕事で役立つ54のアイデア」から、毎週記事をピックアップしてご紹介! 近年さかんに目にするパララックス効果やMasonryを利用したレイアウトをはじめ、見やすくて使いやすいナビゲーション、フォームや製品紹介ページのユーザビリティを向上するインタラクション、表現の可能性を広げるHTML5+CSS3の機能、制作効率を向上するフレームワークの紹介、スマートフォンサイト制作のポイントとTipsなど、Web制作の仕事に役立つ54のアイデアが満載です。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。