テキストフィールド検査 Widget の概要と構造
Spry テキストフィールド検査 Widget は、ユーザーがテキストを入力したときに有効か無効かを表示するテキストフィールドです。 テキストフィールド検査 Widget は、たとえばユーザーが電子メールアドレスを入力するフォームに追加します。 ユーザーが電子メールアドレスの「@」記号やピリオドを入力し忘れると、 入力された情報が無効であることを示すメッセージが返されます。
次にテキストフィールド検査 Widget の例を示します。この例では有効状態を示しています。
- A.
- テキストフィールド Widget、ヒントのアクティブ化
- B.
- テキストフィールド Widget、有効状態
- C.
- テキストフィールド Widget、無効状態
- D.
- テキストフィールド Widget、必須状態
テキストフィールド検査 Widget には、有効、無効、必須などのいくつかの状態が含まれます。 これらの状態のプロパティは、使用する検査結果に応じて、対応する CSS ファイル (SpryValidationTextField.css) を編集することで変更できます。 検査が実行されるタイミングは、さまざまに設定できます。たとえば、サイトビジターが Widget の外側をクリックしたとき、入力したとき、フォームを送信しようとしたときなどに設定できます。
- 初期状態
- ページがブラウザに読み込まれたとき、またはユーザーがフォームをリセットしたとき。
- フォーカス状態
- ユーザーが Widget に挿入ポイントを置いたとき。
- 有効状態
- ユーザーが情報を正しく入力し、フォームを送信できる状態になったとき。
- 無効状態
- ユーザーが無効な形式のテキストを入力したとき。 たとえば年のフィールドに「2006」ではなく「06」と入力したときの状態です。
- 必須状態
- ユーザーがテキストフィールドに必須テキストを入力しなかったとき。
- 最小文字数状態
- ユーザーが入力した文字数がテキストフィールドの最小文字数に満たなかったとき。
- 最大文字数状態
- ユーザーが入力した文字数がテキストフィールドの最大文字数を超えていたとき。
- 最小値状態
- ユーザーが入力した値がテキストフィールドの最小値に満たなかったとき。 整数、実数、およびデータタイプの検査に適用されます。
- 最大値状態
-
ユーザーが入力した値がテキストフィールドの最大値を超えていたとき。 整数、実数、およびデータタイプの検査に適用されます。
ユーザーとのインタラクションの中で、テキストフィールド検査 Widget によってこれらのいずれかの状態が入力されると、実行時に Spry フレームワークロジックにより、この Widget の HTML コンテナに特定の CSS クラスが適用されます。 たとえば、ユーザーがフォームを送信しようとしたときに必須テキストフィールドにテキストが入力されていない場合は、「値を指定する必要があります。」というエラーメッセージを表示するクラスが Widget に適用され、フォームの送信がブロックされます。 エラーメッセージのスタイルと表示状態を制御するルールは、この Widget に対応する "SpryValidationTextField.css" ファイルに存在します。
テキストフィールド検査 Widget のデフォルト HTML コードは、通常はフォームの内部に配置され、コンテナ span タグで構成されます。このタグは、テキストフィールドの input タグを囲みます。 テキストフィールド検査 Widget の HTML コードには、ドキュメントのヘッド内とこの Widget の HTML コードの後に script タグも含まれます。 ドキュメントのヘッド内の script タグは、テキストフィールド Widget に関連するすべての JavaScript 関数を定義します。 Widget コードの後の script タグは、テキストフィールドをインタラクティブにする JavaScript オブジェクトを作成します。
テキストフィールド検査 Widget の HTML コードを次に示します。
<head>
...
<!-- Link the Spry Validation Text Field JavaScript library -->
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<!-- Link the CSS style sheet that styles the widget -->
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<!-- Create the text field widget and assign a unique id-->
<span id="sprytextfield1">
<input type="text" name="mytextfield" id="mytextfield" />
<!--Display an error message>
<span class="textfieldRequiredMsg">A value is required.</span>
</span>
</form>
<!-- Initialize the Validation Text Field widget object-->
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
</script>
</body>
このコードでは、new JavaScript 演算子によって、テキストフィールド Widget オブジェクトが初期化され、span コンテンツが sprytextfield1 の ID を使用して静的 HTML コードからインタラクティブなページエレメントに変換されます。
Widget 内のエラーメッセージの span タグでは、CSS クラスが適用されています。 このクラス (デフォルトでは display:none; に設定されています) は、エラーメッセージのスタイルと表示状態を制御し、対応する CSS ファイルである "SpryValidationTextField.css" に存在します。 Widget がユーザーとのインタラクションの結果としてさまざまな状態を入力した場合、Spry は Widget のコンテナにさまざまなクラスを配置し、それによってエラーメッセージクラスに影響を与えます。
その他のエラーメッセージをテキストフィールド検査 Widget に追加するには、エラーメッセージのテキストを保持する span タグ (またはその他の種類のタグ) を作成します。 次に、CSS クラスを適用することにより、Widget の状態に応じて、メッセージの表示、非表示を切り替えることができます。
対応する CSS ルールを "SpryValidationTextField.css" ファイル内に作成することにより、その他のエラーメッセージをテキストフィールド検査 Widget に追加できます。 たとえば、状態の背景色を変更するには、スタイルシートで対応するルールを編集するか (まだルールが存在しない場合は) 新しいルールを追加します。
テキストフィールド Widget 構造に使用されるさまざまなタグ
上の例では、span タグを使用して Widget の構造を作成しました。
Container SPAN INPUT type="text" Error message SPAN
ただし、Widget は、ほとんどすべてのコンテナタグを使用して作成できます。
Container DIV INPUT type="text" Error Message P
Spry では (タグ自体ではなく) タグ ID を使用して Widget が作成されます。 Spry では、エラーメッセージも、エラーメッセージを含めるために使用される実際のタグとは関係のない CSS コードを使用して表示されます。
Widget コンストラクタに渡された ID は特定の HTML エレメントを識別します。 コンストラクタはこのエレメントを検出し、識別されたコンテナ内で対応する input タグを見つけます。 コンストラクタに渡された ID が (コンテナタグではなく) input タグの ID である場合、コンストラクタは検査トリガを直接 input タグに添付します。 ただし、コンテナタグが存在しない場合は、Widget はエラーメッセージを表示できず、さまざまな検査状態によって input タグエレメントの外観 (背景色など) だけが変更されます。