挿入／Spry／Spry テキストフィールド検証を選択します。
最終更新日 :
2021年4月28日
注意：
Spry Widget は、Dreamweaver CC 以降では jQuery Widget に置き換えられています。既存の Spry Widget を変更できますが、新しい Spry Widget を追加することはできません。
テキストフィールド検証 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 を参照してください。
テキストフィールド検証 Widget の挿入と編集
テキストフィールド検証 Widget の挿入
-
-
Input タグのアクセシビリティ属性ダイアログボックスに情報を入力し、「OK」をクリックします。
注意：
挿入パネルの「Spry」カテゴリを使用してテキストフィールド検証 Widget を挿入することもできます。
検証の種類とフォーマットの指定
テキストフィールド検証 Widget では、様々な種類の検証を指定できます。例えば、クレジットカード番号を入力するテキストフィールドにはクレジットカード検証を指定できます。
-
ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
-
プロパティインスペクター（ウィンドウ／プロパティ）で、タイプメニューから検証の種類を選択します。
-
該当する場合は、フォーマットポップアップメニューでフォーマットを選択します。
ほとんどの検証では、検証が行われるために標準のフォーマットが必要になります。例えばテキストフィールドに整数検証を適用した場合は、テキストフィールドに数字が入力されない限り検証は行われません。ただし検証の種類によっては、テキストフィールドに入力できるフォーマットの種類を選択できます。次の表は、プロパティインスペクターで利用できる検証の種類とフォーマットのリストです。
検証の種類 |
フォーマット |
|---|---|
なし |
特別なフォーマットは不要です。 |
整数 |
数字のみを入力できます。 |
電子メールアドレス |
@ およびピリオド（.）を含み、ピリオドの前後に 1 文字以上の文字がある 電子メールアドレスのみを入力できます。 |
日付 |
フォーマットは様々です。プロパティインスペクターのフォーマットポップアップメニューで選択します。 |
時刻 |
フォーマットは様々です。プロパティインスペクターのフォーマットポップアップメニューで選択します。「tt」は am/pm フォーマットを表し、「t」は a/p フォーマットを表します。 |
クレジットカード |
フォーマットは様々です。プロパティインスペクターのフォーマットポップアップメニューで選択します。あらゆる種類のクレジットカードを使用できるようにしたり、特定のクレジットカード（MasterCard、Visa など）を指定することもできます。4321 3456 4567 4567 のように、クレジットカード番号にスペースを入力することはできません。 |
ZIP コード |
フォーマットは様々です。プロパティインスペクターのフォーマットポップアップメニューで選択します。 |
電話番号 |
米国またはカナダの (000) 000-0000 フォーマット、またはカスタムフォーマットで入力できます。オプションでカスタムフォーマットを選択する場合は、「パターン」テキストボックスに 000.00(00) のようにフォーマットを入力します。 |
社会保障番号 |
社会保障番号を 000-00-0000 のフォーマットで入力できます。別のフォーマットを使用するには、検証のタイプとして「カスタム」を選択し、パターンを指定します。このパターン検証メカニズムで使用できる文字は ASCII 文字のみです。 |
通貨 |
1,000,000.00 または 1.000.000,00 のフォーマットで金額を入力できます。 |
実数／科学的記数法 |
整数（1 など）、浮動値（12.123 など）、科学的記数法による浮動値（e を 10 の累乗数としたときの 1.212e+12、1.221e-12 など）など、様々な種類の数字を検証します。 |
IP アドレス |
フォーマットは様々です。プロパティインスペクターのフォーマットポップアップメニューで選択します。 |
URL |
http://xxx.xxx.xxx または ftp://xxx.xxx.xxx のフォーマットで URL を入力できます。 |
カスタム |
カスタム検証の種類とフォーマットを指定できます。プロパティインスペクターにフォーマットのパターン（および、必要に応じてヒント）を入力します。このパターン検証メカニズムで使用できる文字は ASCII 文字のみです。 |
検証を実行するタイミングの指定
検証がどの時点で実行されるかを指定できます。指定できるのは、サイトビジターが Widget の外側をクリックしたとき、ビジターが入力すると同時、またはビジターがフォームの送信を試みたときのいずれかです。
-
ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
-
プロパティインスペクター（ウィンドウ／プロパティ）で、検証をどの時点で行うかを指定するオプションを選択します。すべてのオプションを選択することも、「送信」のみを選択することもできます。
onBlur
ユーザーがテキストフィールドの外側をクリックしたときに常に検証します。
onChange
ユーザーがテキストフィールド内でテキストを変更したときに検証します。
onSubmit
ユーザーがフォームの送信を試みたときに検証します。送信オプションは初期設定で選択され、選択解除することはできません。
最小および最大文字数の指定
このオプションは、なし、整数、電子メールアドレス、および URL の検証についてのみ選択可能になります。
-
ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
-
プロパティインスペクター（ウィンドウ／プロパティ）で、「最小文字数」または「最大文字数」ボックスに数字を入力します。例えば、「最小文字数」ボックスに「3」と入力すると、ユーザーが 3 文字以上入力した場合にのみ入力が受け入れられます。
最小値および最大値の指定
このオプションは、整数、時刻、通貨、および実数/科学的記数法の検証についてのみ選択可能になります。
-
ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
-
プロパティインスペクター（ウィンドウ／プロパティ）で、「最小値」または「最大値」ボックスに数字を入力します。例えば、「最小値」ボックスに「3」入力すると、ユーザーが 3 以上の値（4、5、6 など）を入力した場合にのみ入力が受け入れられます。
デザインビューでの Widget の状態の表示
-
ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
-
プロパティインスペクター（ウィンドウ／プロパティ）で、プレビューの状態ポップアップメニューから表示する状態を選択します。例えば、有効状態でこの Widget を表示する場合は「有効」を選択します。
テキストフィールドの必須状態の変更
初期設定では、Dreamweaver で挿入したテキストフィールド検証 Widget を Web ページでパブリッシュすると、ユーザー入力が必須になります。ただし、テキストフィールドの入力をオプションにすることもできます。
-
ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
-
プロパティインスペクター（ウィンドウ／プロパティ）で、「必須」チェックボックスを必要に応じてオンまたはオフにします。
テキストフィールドのヒントの作成
テキストフィールドのフォーマットは種類が非常に多いので、入力フォーマットをヒントで知らせるとユーザーに便利です。例えば、電話番号検証が設定されたテキストフィールドでは、(000) 000-0000 の形式の電話番号のみが受け入れられます。ユーザーがブラウザーでページを読み込んだときにテキストフィールドに正しいフォーマットが表示されるように、このサンプル電話番号をヒントとして入力することができます。
-
ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
-
プロパティインスペクター（ウィンドウ／プロパティ）で、「ヒント」テキストボックスにヒントを入力します。
無効な文字のブロック
テキストフィールド検証 Widget にユーザーが無効な文字を入力するのを防止できます。例えば、整数検証が設定された Widget にこのオプションを選択すると、ユーザーがこのテキストフィールドに文字を入力しようとしても何も表示されません。
-
ドキュメントウィンドウでテキストフィールド検証 Widget を選択します。
-
プロパティインスペクター（ウィンドウ／プロパティ）で、「パターンを適用」オプションを選択します。
テキストフィールド検証 Widget のカスタマイズ
プロパティインスペクターでは、テキストフィールド検証 Widget の簡単な編集は可能ですが、カスタマイズされたスタイル設定タスクはサポートされません。テキストフィールド検証 Widget の CSS を変更すると、自由にスタイル設定した Widget を作成できます。高度なスタイル設定タスクについて詳しくは、www.adobe.com/go/learn_dw_sprytextfield_custom_jp を参照してください。
次のトピックに登場する CSS ルールは、すべて SpryValidationTextField.css ファイルに格納された初期設定ルールです。Spry テキストフィールド検証 Widget を作成すると、Dreamweaver によってサイトの SpryAssets フォルダーに SpryValidationTextField.css ファイルが保存されます。このファイルには、その Widget に適用される様々なスタイルに関するコメント付き情報も格納されています。このため、このファイルを参照すると役に立ちます。
注意：
テキストフィールド検証 Widget に関するルールは、対応する CSS ファイルで直接編集することもできますが、CSS スタイルパネルを使用して Widget の CSS を編集することもできます。CSS スタイルパネルでは、Widget の様々な部分に割り当てられた CSS クラスを見つけやすくなっています。特に「現在」モードがこの点に優れています。
テキストフィールド検証 Widget のエラーメッセージのテキストのスタイル設定
テキストフィールド検証 Widget のエラーメッセージは、初期設定では、1 ピクセルのボーダーで囲まれた赤いテキストで表示されます。
-
テキストフィールド検証 Widget のエラーメッセージのテキストスタイルを変更するには、次の表を使用して適切な CSS ルールを見つけ、初期設定プロパティを変更するか、または独自のテキストスタイルプロパティおよび値を追加します。
変更するテキスト
関連する CSS ルール
変更する関連プロパティ
エラーメッセージのテキスト
.textfieldRequiredState .textfieldRequiredMsg、.textfieldInvalidFormatState .textfieldInvalidFormatMsg、.textfieldMinValueState .textfieldMinValueMsg、.textfieldMaxValueState .textfieldMaxValueMsg、.textfieldMinCharsState .textfieldMinCharsMsg、.textfieldMaxCharsState .textfieldMaxCharsMsg color: #CC3333; border: 1px solid #CC3333;
テキストフィールド検証 Widget の背景色の変更
-
様々な状態のテキストフィールド検証 Widget の背景色を変更するには、次の表を使用して適切な CSS ルールを見つけ、初期設定の背景色値を変更します。
変更する色
関連する CSS ルール
変更する関連プロパティ
有効状態の Widget の背景色
.textfieldValidState input、input.textfieldValidState background-color: #B8F5B1;
無効状態の Widget の背景色
input.textfieldRequiredState、.textfieldRequiredState input、input.textfieldInvalidFormatState、.textfieldInvalidFormatState input、input.textfieldMinValueState、.textfieldMinValueState input、input.textfieldMaxValueState、.textfieldMaxValueState input、input.textfieldMinCharsState、.textfieldMinCharsState input、input.textfieldMaxCharsState、.textfieldMaxCharsState input background-color: #FF9F9F;
フォーカスがある Widget の背景色
.textfieldFocusState input、input.textfieldFocusState background-color: #FFFFCC;
