テキストフィールド検証 Widget について

Spry テキストフィールド検証 Widget は、ユーザーがテキストを入力したときに有効か無効かを表示するテキストフィールドです。 テキストフィールド検証 Widget は、たとえばユーザーが電子メールアドレスを入力するフォームに追加します。 ユーザーが電子メールアドレスの「@」記号やピリオドを入力し忘れると、入力された情報が無効であることを示すメッセージが返されます。

次にテキストフィールド検証 Widget の例を示します。この例では有効状態を示しています。

A.

テキストフィールド Widget、ヒントのアクティブ化

B.

テキストフィールド Widget、有効状態

C.

テキストフィールド Widget、無効状態

D.

テキストフィールド Widget、必須状態

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

イニシャル状態

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

フォーカス状態

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

有効状態

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

無効状態

ユーザーが無効な形式のテキストを入力したときの Widget の状態。 たとえば年のフィールドに「2006」ではなく「06」と入力したときの状態です。

必須状態

ユーザーがテキストフィールドに必須テキストを入力しなかったときの Widget の状態。

最小文字数状態

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

最大文字数状態

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

最小値状態

ユーザーが入力した値がテキストフィールドの最小値に満たなかったときの Widget の状態。 整数、実数、およびデータタイプの検証に適用されます。

最大値状態

ユーザーが入力した値がテキストフィールドの最大値を超えていたときの Widget の状態。 整数、実数、およびデータタイプの検証に適用されます。

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

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

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