セレクト検証 Widget について

Spry セレクト検証 Widget は、ユーザーが選択すると有効状態または無効状態が表示されるドロップダウンメニューです。 たとえば、あるセレクト検証 Widget に含まれるリストが、横線で区切ってグループ化されているとします。 このときユーザーが誤って区切りの横線を選択すると、その選択が無効であることを示すメッセージが返されます。

次に、展開されたセレクト検証 Widget の例と、さまざまな状態の折りたたまれたセレクト検証 Widget の例を示します。

A.

フォーカスがあるときのセレクト検証 Widget

B.

選択 Widget、有効状態

C.

選択 Widget、必須状態

D.

選択 Widget、無効状態

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

イニシャル状態

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

フォーカス状態

ユーザーがクリックしたときの Widget の状態。

有効状態

ユーザーが有効な項目を選択し、フォームを送信できる状態になったときの Widget の状態。

無効状態

ユーザーが無効な項目を選択したときの Widget の状態。

必須状態

ユーザーが有効な項目を選択し忘れたときの Widget の状態。

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

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

セレクト検証 Widget の動作およびコードの詳細については、www.adobe.com/go/learn_dw_spryselect_jp を参照してください。