Lesson 04 リアルタイムでフォーム入力を判定する - Webデザイン表現&技法の新・スタンダード・インタラクション編

Webデザイン 表現&技法の 新・スタンダード

Lesson 4

リアルタイムで フォーム入力を判定する

	制作・文			河原 覚（株式会社アークフィリア）
＞	To Use			CSS | JavaScript
＞	Browser			IE 6over | Firefox 3over | Safari 5over

複雑な条件があるフォームは通常の要素では表現しきれず、ユーザーに不便を強いてしまうことがある。そういった場合は入力に応じたリアルタイムの判定をすることでユーザビリティを向上できるだろう。

まずはベースとなる問い合わせフォームを作り、必要なCSSとJavaScriptを設定する【1-1】。フォームには各入力要素の近くにそれぞれどのような内容を入力してもらうかの説明文の表示スペースを用意しておく。各入力要素と指示ブロックは同じcheckTargetクラスの子となるようにする【1-2】。


【1-1】CSSとJavaScriptの読み込み


【1-2】ユーザー名、会員番号はテキスト入力、お問い合わせ内容の種類はラジオボタン、お問い合わせ内容をテキストエリア、利用規約への同意等をチェックボックスで構成する

まずはユーザー名の入力をチェックしよう。ここでは入力内容に制限はなく、未入力かどうかだけを判定する。ユーザー名を入力するinput要素を指定し、keyupイベントを設定する。コールバック関数では、自身のvalueがあるかないかを判定し、あればcheckTargetクラスをもつ親要素にvalidクラスを、なければinvalidクラスを設定する。input要素と指示表示先のinstructionクラスにはvalidクラス以下にあるときと、invalidクラス以下にあるときそれぞれのCSSを設定すれば、キー入力ごとに内容を判定し、フォーム内容が適正かどうかをリアルタイムで示すことができる【2-1】【2-2】【2-3】。


【2-1】ユーザー名判定のJavaScript


【2-2】未入力エラー


【2-3】エラーなし

次の会員番号は大文字アルファベット5桁、ハイフン、数字8桁という入力ルールを持っている。このような場合は正規 表現で入力内容を比較するのがよいだろう。基本は先ほどと変わらず、判定条件を正規表現のtestメソッドに変えてやればよい【3-1】【3-2】【3-3】。


【3-1】会員番号判定のJavaScript


【3-2】フォーマットエラー


【3-3】エラーなし

今度はラジオボタンだ。これは必ず1つ選択されていることを判定する。今度はkeyupではなく、チェンジイベントに設定する。判定条件は:checkedセレクタを用い、チェックされたエレメントの数が1つであるかどうかで判定をする【4-1】【4-2】。


【4-1】ラジオボタン判定のJavaScript


【4-2】エラーなし

順番が前後するが、次に最後部の規約等への同意チェックボックスを設定しよう。これは両方ともチェックがされているかどうかを判定する。ラジオボタンと同じようにchangeイベントを設定し、今度はチェックされたエレメントが2つであることを判定条件としよう【5-1】【5-2】【5-3】。


【5-1】チェックボックス判定のJavaScript


【5-2】片方のみチェック


【5-3】エラーなし

お問い合わせ内容のテキストエリアは100文字の入力制限がついている。そこで文字数を超えているかどうかの判定とともに、あと何文字入力可能かを示すのがよいだろう。インプットと同じくkeyupイベントを設定し、valueのlengthで比較をする。条件は100文字より多い場合、0文字の場 合、ちょうど100文字の場合、それ以外となる。このうちinvalidを設定するのは100文字を超えている場合と、0文字の場合で、そのほかの場合は残り入力文字数に対するコメントをそれぞれ調整している。コメント表示はspan#TextCounterのテキストを書き換えることで行っている【6-1】【6-2】【6-3】。


【6-1】文字数判定のJavaScript


【6-2】文字数オーバー


【6-3】文字数範囲内

最後にエラーを残した状態では送信できないように、form要素のsubmitイベントを設定する。各checkTargetクラスの要素数とcheckTargetクラスでかつvalidクラスを持つ要素数を比較し、同数であればす べてチェック済みであると見なして送信する。そうでなければ入力内容にエラーがあることをアラートで知らせ、送信を実行しないようにしよう【7-1】。そしてDOMツリー構築後に処理を実行するために、全体を$(function(){と});で囲めば完成だ。


【7-1】送信判定のJava Script