テキストエリア検証 Widget について

Spry テキストエリア検証 Widget は、ユーザーが文をいくつか入力したときに有効か無効かを表示するテキストエリアです。 必須フィールドであるテキストエリアにユーザーが何もテキストを入力していない場合は、値が必須であることを示すメッセージが返されます。

次にテキストエリア検証 Widget の例を示します。この例では有効状態を示しています。

フルサイズのグラフィックを表示

A.

入力可能な残り文字数カウンタ

B.

フォーカスがあるときのテキストエリア Widget、最大文字数状態

C.

フォーカスがあるときのテキストエリア Widget、有効状態

D.

テキストエリア Widget、必須状態

E.

入力文字数カウンタ

テキストエリア検証 Widget には、有効、無効、必須などのいくつかの状態が含まれます。 これらの状態のプロパティは、使用する検証結果に応じて、プロパティインスペクタで変更できます。 検証が実行されるタイミングは、たとえばユーザーが Widget の外側をクリックしたとき、入力したとき、フォームを送信しようとしたときなどさまざまに設定できます。

イニシャル状態

ページがブラウザに読み込まれたとき、またはユーザーがフォームをリセットしたときの Widget の状態。

フォーカス状態

ユーザーが挿入ポイントを置いたときの Widget の状態。

有効状態

ユーザーが情報を正しく入力し、フォームを送信できる状態になったときの Widget の状態。

必須状態

ユーザーがテキストを入力していないときの Widget の状態。

最小文字数状態

ユーザーが入力した文字数がテキストエリアの最小文字数に満たなかったときの Widget の状態。

最大文字数状態

ユーザーが入力した文字数がテキストエリアの最大文字数を超えていたときの Widget の状態。

ユーザーとのインタラクションの中で、テキストエリア検証 Widget によってこれらのいずれかの状態が入力されると、実行時に Spry フレームワークロジックにより、この Widget の HTML コンテナに特定の CSS クラスが適用されます。 たとえば、ユーザーがフォームを送信しようとしたときにテキストエリアにテキストが入力されていない場合は、「値を指定する必要があります。」というエラーメッセージを表示するクラスが Widget に適用されます。 エラーメッセージのスタイルと表示状態を制御するルールは、この Widget に対応する SpryValidationTextArea.css という CSS ファイルに存在します。

テキストエリア検証 Widget の初期設定 HTML は、通常はフォームの内部に配置され、テキストエリアの <textarea> タグを囲むコンテナ <span> タグで構成されます。 テキストエリア検証 Widget の HTML には、ドキュメントの head 内とこの Widget の HTML マークアップの後の script タグも含まれます。

テキストエリア検証 Widget の動作およびコードの詳細については、www.adobe.com/go/learn_dw_sprytextarea_jp を参照してください。