- Info
- UserInterface
- ユーザーインターフェイス
- ナビゲーションメニュー
- タブ切り替え
- エフェクト制御
- Ajax
- Ajax
- 先読みデータキャッシュ
- フォーム入力値の検証
- Effect Off
Ajax - FormControl
Webサイトでのフォームの位置付け
Webサイトにおいて、情報の入力手段として入力フォームは欠かせない存在だと言えます。
それは検索サイトでの単純な検索文字列入力項目から、Blog/SNSでの記事更新やECサイトでの住所/氏名など多くの入力を求めるフォームまで、多種多様な情報入力インターフェイスとして広範に利用されています。
が、現在のHTMLでの入力フォームでは、非常に限られた入力形式指定しか出来ません。 それ故、基本的な入力値の検証であっても、全て毎回サーバースクリプトを通す必要がある為、 ユーザーの入力操作に対するレスポンス速度を低下させる大きな要因となっています。
JavaScriptを利用したフォーム入力値の検証
そこで最低限のチェック(バリデーション)だけはクライアント側でJavaScriptを利用して行い、そのチェックを通った入力情報だけをサーバー側での検証に渡すようにする事で、 ユーザーの待ち時間と送信データ量、サーバー側負荷の軽減を実現する事が、このFormCtrlの主要な目的となります。
Blog/SNS/ECサイトあるいはネットゲームなど、新規会員登録ではWebページでの入力フォームが一般的に利用されますが、 入力フォームは、それらのサービスの前にユーザーが最初に利用する機能となりますので、 サービス自体に対するユーザーの印象を左右しかねないものであり、またユーザーがスムーズに登録作業を完了する為にも使い易い入力フォームは重要な要素となります。
このように、JavaScriptを利用したフォーム入力値の検証と補足情報表示は、 その機能性と共にユーザーに強くアピール出来る要素として非常に有効な付加機能となります。
ページ遷移を伴わないサーバー側検証
フォームのサンプル
FormCtrlの特徴
一般のフォームでは全ての項目に記入した後、登録(submit)時にサーバー側で一括して検証を行い、修正点があればユーザーに提示しますが、 それよりも、JavaScriptでの個別検証のように、個々の項目の入力直後にユーザーに対し修正を求め、 それらのエラー内容の説明を表示する事が出来るのは、ユーザビリティの観点からも好ましいと思われます。
さらに、JavaScriptの利用では動的にレイアウトの変更を行う事が出来る為、 静的なページではレイアウト上の制限から中々難しい、それぞれの入力項目についての詳細な説明を記載する事も可能となります。
勿論JavaScriptを利用したクライアント側での検証だけでは不十分であり、最終的なサーバー側でのチェックは絶対に必要です。 が、ユーザーの入力補助的な機能としてのJavaScriptを利用したフォーム入力値検証は、 Web初期から使われている既にかなりのレガシーなフォーム入力を改革出来る手段と言えます。
FormCtrlの機能概要
ここではFormCtrlで利用可能な機能と、その簡単な説明を行います。
-
入力値の検証
- 必須項目設定とその項目が空白(未入力/未選択)では無いか
- テキスト入力での文字数
- select multipleでの選択数や、チェックボックス群でのチェック数
- パスワードやメールアドレスなど、確認の為の重複入力を求める項目での一致検証
- 特定のフォーマット(文字コードやメールアドレス/WebサイトURL)であるかの検証
- 組み込み判定以外の、関数/正規表現を利用したユーザー定義の値検証の追加
-
検証エラーの場合の通知情報(tip)表示
入力値検証に失敗した場合には、検証毎に設定してあるエラーメッセージを表示。デフォルトで用意されたものからユーザー指定の任意の文字列に変更可。 -
入力項目の詳細説明(info)表示
入力項目にフォーカスを当てる事で、その入力項目の詳細説明の表示を行う。 常に全ての項目の詳細説明が表示されている情報過多なレイアウトと比較した場合、必要な情報だけが表示されている為、視覚的により判り易い画面となる。 -
強制(自動)変換/削除機能
単に項目説明として適正文字を表記するだけでは無く、無効な文字が入力された場合には、削除や対応する文字があれば変換を行う事も可。 -
Ajaxによる送信
フォーム全体の情報の送信登録(submit)と共に、個々の入力値の検証でもAjaxの利用が可能な為、 ユーザーIDが利用可能かのチェックや、入力値検証処理をサーバー側だけで記述したい場合などに有効。 -
エフェクト設定
入力項目のフォーカス(focus)/ブラー(blur)時、tipとinfoの表示/非表示時にエフェクトを設定可。 WebJADE共通仕様のエフェクトである為、エフェクト制御も適用可。 -
二重登録防止
通常登録/Ajax登録のどちらの場合でも、送信ボタンを押した時の処理で内部情報を更新し、ニ重登録を防ぐ機能。 -
JavaScriptとHTMLの分離
基本的な構成はHTMLで書き、検証設定は全てJavaScriptで記述する為、 タグ内で特殊な属性値を記述するなどの必要が無く、デザインとスクリプトの高いレベルでの分離が可能。 これにより既存のフォームへの追加も容易となり、 またJavaScriptが無効な環境であっても通常のフォーム機能として問題無く利用可能。
基本的な入力値検証
必須項目設定と文字数制限
詳細な情報を記入する多くのフォームでは、必ず入力される事が求められる必須項目と、ユーザーの任意入力となるオプション項目があります。 必須項目では、文字通り何らかの文字入力が必要となりますが、 FormCtrlでは必須項目の文字列として、空白(各種white space)以外の文字で構成されている事が求められます。
また、必須項目設定と共に頻繁に使われる形式指定として、文字数の制限があります。 FormCtrlの文字数制限では、～文字以上の最小文字数、～文字以下の最大文字数、～文字以上～文字以下の範囲指定という3種類の設定が可能です。 現在の多くのブラウザでは、JavaScript内での文字をUnicodeとして扱いますので、所謂全角半角に関係無く全ての文字は1文字とカウントされます。
ハンドルネーム*:
必須項目では無いオプション扱いの項目では、当然未入力状態でもエラー表示はされません。が、何らかの入力があった場合には、それぞれの入力形式による検証が行われます。
ご意見ご感想:
文字コードや特定フォーマットの指定
ユーザーID/パスワードなどの入力項目では、多くの場合、文字コード(半角英数字)の指定が行われます。 このように特定の文字コードだけが有効な入力項目の為に、文字コード検証が用意されています。
コードネーム*:
FormCtrlでは、上記の半角英数ような単純な形式指定と共に、定型的なフォーマットについての判定も用意されています。 あくまで形式での検証を行うだけですので、厳密な判定(指定メールアドレスが存在し送信先として登録出来るか、など)はサーバー側で別途行う必要があります。
Webサイト:
重複(確認)入力項目での動作
パスワードやメールアドレスなどの重要な情報の入力では、入力項目欄を2つ用意し、同一の内容で入力する事を要求するケースがあります。 FormCtrlでは、そのような検証に対応する為に、ある項目と同一の内容が入力されているかのチェックを行う事が可能です。
メールアドレス*:
メールアドレス(再入力)*:
複数入力項目での処理
電話番号や郵便番号など、1つのテキスト入力項目ではなく複数の入力項目に分けてユーザーに入力を求めるフォームも多く見られます。 FormCtrlではこのような構成の項目に対応し、個々の入力の個別検証では無く、全ての項目を一括して検証する事が可能です。
電話番号*:
selectを使った単一選択項目
selectを使った選択項目では、初期状態として未選択扱いの項目が設定されるケースが多くなります。 FormCtrlでの選択項目設定では、optionのvalueに空白("")を設定する事で、その項目は未選択扱いになります。 よって、その選択項目が必須項目設定であった場合には未選択エラーとなり、初期状態以外の何らかの選択が行われる事が求められます。
また、この例では選択肢として有効な値が設定されていて、最後の項目はそこに設定されていない無効な値となります。 これを利用し、初期に表示されるoptionのvalueに無効な値を設定する事でも、ユーザーに初期値とは異なる選択を求める事も可能です。
年齢*:
select(multiple)やcheckboxなどの複数選択項目での選択数検証
multiple属性を有効にしたselectや、複数のエレメントで構成されたcheckbox群など、複数の選択を行うような場合に、 選択数の設定が可能です。
通勤通学手段*:
実際のフォームの多くでは、選択項目としては、select-multipleよりも複数のcheckboxを組み合わせたcheckboxグループの利用が一般的となっています。
FormCtrlでもselect-multipleと同様に、checkboxグループでの選択数の設定が可能になります。
またcheckboxでは、サーバー側スクリプトでの処理方法によって、1つのcheckboxグループで同一のname属性値を設定するケースと、
別々の属性値を設定するケースがありますが、FormCtrlではその両方のケースに対応が可能です。
下記のサンプルではそれぞれ別のname属性値を設定しています。
好きな色:
高度な検証機能と各種設定
入力値検証のタイミング
前項とこのページでのサンプルでは、入力値検証処理が行われるタイミングは、 その入力項目のBlur(キーボードフォーカスを失う)時になります。 FormCtrlではそれ以外にも、他の入力項目がFocus状態になった時に、直前までFocusを得ていた入力項目の値を検証する設定があります。 また、テキスト入力ではキー入力毎に検証を行う設定も可能となります。
BlurとFocusの2つの設定は互いに排他関係ですので、1つのフォーム全体でどちらの設定を使うか選択しなければなりませんが、 テキスト入力項目でのキー入力検証は、個々の項目に対する個別設定が可能になっていますので、任意のテキスト入力項目で利用出来ます。
下記の入力項目は、キー入力毎に検証を行う設定となっています。キー入力毎の検証はキーが押された時では無く、キーが離されたタイミングで行われます。
キー入力毎の検証設定の中でもオプション設定があり、キーを離してから実際に検証が行われるまでの時間が設定出来ます。ちなみにデフォルトでは待ち時間0になっています。 このようなオプション設定を用意したのは、別項に記すAjaxでの個別項目検証を行う場合に、 キーを離す度に毎回Ajaxリクエストを発行するのでは無く、ある程度の入力が行われてから送信するようにする為です。 勿論Ajax非利用時でも検証処理頻度が減少しますので、負荷軽減に繋がります。
ユーザー定義の形式
フォームでは様々な情報を入力します。多くのフォームで使われるユーザーID,パスワード,メールアドレスなどは大抵同じ形式になりますが、 それ以外の項目では、それらのフォーム固有の形式となる事も珍しくありません。
そこでFormCtrlでは、そのようなフォーム固有の形式にも対応する為に、ユーザー定義の形式検証処理が設定出来ます。 ユーザー定義の検証処理では正規表現と関数が使えますので、幅広い形式に対応可能となります。 またユーザー定義の形式では、その指定形式と違った場合に表示するエラーメッセージも同時に設定出来ます。
郵便番号:
文字の強制(自動)変換と削除
入力フォームでは、上記の郵便番号のように、入力されるべき文字の種類が限られている項目があります。 そのような項目では、項目説明によってユーザーにそれらの適正な文字を知らせる事が行われますが、 それは単なる情報ですので、ユーザーが不適正な文字を入力した場合には、エラーを通知するだけとなります。
そこでFormCtrlでは、ユーザーが不適正な文字を入力した場合には、不適正な文字を強制的に削除する事や、可能ならば適正な文字に変換する機能を搭載しております。 全角英数字を半角英数字に、ひらがなをカタカナに変換する(それぞれの逆も可)などが可能です。
郵便番号:
FormCtrlの文字数検証では、空白も1文字と判定される為、文字列の最初と最後の空白や、複数の連続した空白を1つに纏めた方が正確な文字数判定になると言えます。 そこでここでは不要な空白を削除するという設定が適用されています。 強制変換処理は、入力値検証と同じタイミングで行われますが、検証よりも前に処理されますので、予備処理としても有効な機能となります。
番地とマンションアパート名*:
この項目は3文字以上50文字以下という文字数制限があります。
形式検証の順序
入力検証では、文字コードと文字数制限など、複数の条件を設定する事が出来ます。 それらの条件が適用される順は、条件を記述した順となりますので、その検証条件によっては微妙にユーザビリティは変化します。
この2つのサンプルは、両方共にひらがな,10文字以上20文字以下という設定ですが、その検証順が異なっています。
ひらがな:
ひらがな:
エラーメッセージのカスタマイズ
項目の詳細説明を記述するinfo欄では、HTMLとして書かれた文章をそのままの形で利用し、FormCtrlで内容を変更する事はありませんが、 検証エラーなどを表示するtip欄は、入力内容と検証条件に応じ表示する文字列は変化しますので、FormCtrlで管理する必要があります。
例えば、デフォルトの当り障りの無い文章では無く、設置するWebサイトの特徴を反映した文章に変更したい場合や、 日本語以外の言語に対応したい場合など、そのエラーメッセージが変更出来れば利便性は増すかと思われます。 そこでFormCtrlでは、内部JavaScriptコードを変更をする事無く、文字列設定を上書きする事が出来るようになっています。
この詳細機能ページのフォームでは、必須項目が未入力であった場合に表示されるメッセージを、 デフォルトの「必須項目が未入力です」から「必須項目に何も入力されていません」に変更しています。 また下記のサンプルでは、半角英数字の検証が失敗した時に表示されるメッセージを、「半角英数字で入力して下さい」から「ユーザーIDは半角英数字で記入すべきです」に置き換えています。 このようにフォーム全体設定に影響する文字列から、個々の入力項目だけで利用される文字列まで、変更可能となっています。
ユーザーID*:
tip欄は、検証でのエラー発生時にはアクティブ状態になり、検証結果が正常の場合には非アクティブ状態に設定します。
前項の基本的な入力値検証ページのフォームでは、非アクティブ状態を非表示にしていた為、指定形式通りの入力が行われた場合には、
tip欄は何も表示されません。
一方、この詳細設定ページでのフォームでは、非アクティブ状態はテキストの色を変更するだけですので、文字列は表示されたままになります。
このようなケースの為に、正常値の場合にtip欄に設定する文字列を指定する事が出来ますので、検証が正常に終了したという事が一目で判るようになります。
エラー/補足情報(tip)と詳細説明(info)の設定
tipとinfoは入力要素(input/textarea/selectなど)と関連付けられますので、 FormCtrlの設定では、入力要素とtip,infoを含むエレメント(itemRoot)を指定し、その中にある入力要素とtipとinfoを特定し、1つの入力項目(item)として管理します。 それぞれの指定方法は、HTML上でタグとクラス名を記述し、その設定をFormCtrlの初期化処理で記述します。 逆に言えば、これだけの条件を守ればOKですので、デザインの自由度は非常に高いと言えます。
またtip/infoのアクティブ/非アクティブの切り替えエフェクトも、CSSを利用した各種操作が可能ですので、多彩なエフェクトを実装する事が出来ます。
tip/infoのエフェクトでは、フォーム全体に適用するエフェクトとは別に、個別の入力項目だけで利用するエフェクトも設定可能です。 下記のサンプルでは、tip/info共に、この入力項目専用のエフェクトを設定してあります。
お名前*:
Ajaxによる個別検証と登録送信(submit)
入力値検証でのAjaxの利用
ここではAjaxを利用し、入力値検証をサーバー側で行うような処理となります。
結局サーバー側での検証を行うのなら、フォーム全体の送信(submit)と大差ないのではと思われるかもしれませんが、
個々の入力項目でAjaxを利用した個別検証では、下記のような利点があります。
- ページの遷移が必要無く、クライアント側での検証と同様の利点と操作感。
- ユーザーIDの重複チェックなど、サーバー側での検証で不可となる可能性の高い項目での有効性。
- 複雑な検証の場合、サーバー側とクライアント側双方に複雑な検証処理を記述しなければならないが、それをサーバー側だけに一元化。
- submitボタンを押す事無く送信可能な為、submitボタンやそもそもformエレメントを使わなくてもフォーム機能の実装が可能
Ajaxでの個別検証では、勿論サーバー側スクリプトの対応が必要になりますが、クライアント側では、多少初期設定の記述が増えるだけです。
下記の例では、必須項目と文字数制限はクライアント側(FormCtrl)での検証を行い、文字コード(半角英数字)検証はサーバー側で行います。 このように全く未チェックのままサーバー側に渡すのでは無く、一部の検証だけクライアント側で行うような事も可能です。 (当然最終的なサーバー側の検証でも必須項目と文字数チェックなどは必要となります。)
次の例は、Ajaxでの入力値検証が実際に利用される形態に近い、ユーザーIDの入力項目のサンプルとなります。 ユーザーiDは、半角英数字と文字数の制限があると共に、既存ユーザーIDとの重複チェックも行う必要があります。 ここでも、まず基本的な入力値形式の検証はクライアント側で行ってから、サーバーに送信しユーザーIDの重複チェックを行います。
ユーザーIDとして、foobar01,foobar02,johndoe,slackware,redhat,suse93,ubuntuが登録されていますので、これらのユーザーIDでは重複エラーとなり、 サーバーから返されたエラーメッセージを表示します。
ユーザーID*:
上記のサンプルはユーザーIDの動的な検証と共に、サーバー側とクライアント側で形式設定が異なっている(間違っている)場合の例ともなります。 クライアント側の設定では、文字数が4文字以上20文字以下ですが、サーバー側の設定は、6文字以上20文字以下となっています。 よって、入力文字が4文字と5文字の場合にはAjaxリクエストが行われますが、サーバー側で文字数エラー判定となり、サーバー側で生成したエラーメッセージが表示されます。
この例では、サーバー側の検証の方がより厳密ですので問題は少ないですが、逆のケース、クライアント側の方が入力値の許容範囲が狭いような場合には、 本来は有効な形式であるにも拘わらず、クライアント側でエラー判定され登録出来ないような事態も考えられます。
このように、クライアント側とサーバー側で設定を同一にする必要があるというのが、JavaScriptでのフォーム入力値検証の難しい点と言えます。
登録(submit)でのAjaxの利用
FormCtrlでは、個々の入力項目での検証と共に、フォームの登録(submit)でのAjax送信にも対応します。
フォーム情報の登録でのAjax送信では、正常に登録完了する場合には通常の非Ajax送信と大差ありませんが、 サーバー側でエラー判定された項目がある場合には、利用価値のある有効な機能となります。 Ajax送信での登録時にエラー項目があった場合には、サーバー側からはJSON形式でエラー項目名とエラーメッセージを返し、 クライアント側では、それを適切な場所に表示する形となりますので、Ajaxの特徴であるページ遷移の無いスムーズな表示となります。
FormCtrlでのAjax登録では、クライアントからの送信データは、基本的に非Ajax/非JavaScript環境からと同様の送信内容となりますので、 サーバー側スクリプトはFormCtrlを利用しない場合と同様の処理を行い、クライアントへのレスポンス出力をAjax用に変更するだけとなります。 この点も、既存のフォームからの移行が容易というFormCtrlの特徴となっています。
