挿入／Spry／Spry 再入力検証を選択します。
最終更新日 :
2021年4月28日
注意：
Spry Widget は、Dreamweaver CC 以降では jQuery Widget に置き換えられています。既存の Spry Widget を変更できますが、新しい Spry Widget を追加することはできません。
再入力検証 Widget について
再入力検証 Widget は、ユーザーが入力した値が同じフォーム内の同種フィールドの値と一致するか（有効）しないか（無効）を検証するテキストフィールドまたはパスワードフォームフィールドです。例えば、直前のフィールドに入力したパスワードを再入力するように要求するフォームなどで使用できます。ユーザーが入力したパスワードが前の入力内容と正確に一致していない場合は、値が一致しないことを示すエラーメッセージが表示されます。
再入力検証 Widget とテキストフィールド検証 Widget を併用して電子メールアドレスを検証することもできます。
注意：
再入力検証 Widget は、Spry 検証 Widget の扱いに習熟してから使用することをお勧めします。まだ慣れていない場合は、Spry テキストフィールド検証 Widget の操作、または他の検証 Widget の概要を読んでから使用を開始してください。この概要では、検証 Widget に関する基本概念をすべて説明することはしません。
一般的な設定による再入力検証 Widget の例を次の図に示します。
A. パスワードフィールドまたは Spry パスワード認証 Widget B. 再入力 Widget
再入力検証 Widget には、有効、無効、必須などいくつかの状態があります。これらの状態のプロパティは、対応する CSS ファイル（SpryValidationConfirm.css）を編集することにより、目的の検証結果に応じて変更できます。検査が実行されるタイミングは、例えばユーザーが Widget の外側をクリックしたとき、入力したとき、フォームを送信しようとしたときなど、様々に設定できます。
イニシャル状態
ページがブラウザーに読み込まれたとき、またはユーザーがフォームをリセットしたときの状態。
フォーカス状態
ユーザーが Widget 内に挿入ポイントを置いたときの状態。
有効状態
ユーザーが正しい情報を入力し、フォームを送信できる状態になったときの状態。
無効状態
ユーザーが入力したテキストが前のテキストフィールド（テキストフィールド検証 Widget または パスワード検証 Widget）の入力内容と一致しないときの状態。
必須状態
ユーザーがテキストフィールドに必須テキストを入力していないときの状態。
再入力検証 Widget の動作および Widget 構造について詳しくは、www.adobe.com/go/learn_dw_spryconfirm_jp を参照してください。
再入力検証 Widget の挿入と編集
再入力検証 Widget の挿入
-
-
Input タグのアクセシビリティ属性ダイアログボックスに情報を入力し、「OK」をクリックします。
注意：
挿入パネルの「Spry」カテゴリを使用して再入力検証 Widget を挿入することもできます。
再入力検証 Widget の必須状態の変更
初期設定では、Dreamweaver で挿入した再入力検証 Widget を Web ページ上にパブリッシュすると、ユーザー入力が必須になります。ただし、再入力テキストフィールドの入力をオプションにすることもできます。
-
ドキュメントウィンドウで、再入力検証 Widget の青いタブをクリックして選択します。
-
プロパティインスペクター（ウィンドウ／プロパティ）で、「必須」チェックボックスを必要に応じてオンまたはオフにします。
検証対象テキストフィールドの指定
-
ドキュメントウィンドウで、再入力検証 Widget の青いタブをクリックして選択します。
-
プロパティインスペクター（ウィンドウ／プロパティ）で、検証対象ポップアップメニューから、検証の対象とするテキストフィールドを選択します。このポップアップメニューには、固有の ID を割り当てたすべてのテキストフィールドが表示されます。
デザインビューでの Widget の状態の表示
-
ドキュメントウィンドウで、再入力検証 Widget の青いタブをクリックして選択します。
-
プロパティインスペクター（ウィンドウ／プロパティ）で、プレビューの状態ポップアップメニューから表示する状態を選択します。例えば、有効状態でこの Widget を表示する場合は「有効」を選択します。
検証を実行するタイミングの指定
検証がどの時点で実行されるかを指定できます。指定できるのは、サイトビジターが Widget の外側をクリックしたとき、ユーザーが入力すると同時、またはユーザーがフォームの送信を試みたときのいずれかです。
-
ドキュメントウィンドウで、再入力検証 Widget の青いタブをクリックして選択します。
-
プロパティインスペクター（ウィンドウ／プロパティ）で、検証をどの時点で行うかを指定するオプションを選択します。すべてのオプションを選択することも、「送信」のみを選択することもできます。
onBlur
ユーザーが再入力テキストフィールドの外側をクリックしたときに常に検証します。
onChange
ユーザーが再入力テキストフィールド内でテキストを変更したときに検証します。
onSubmit
ユーザーがフォームの送信を試みたときに検証します。送信オプションは初期設定で選択され、選択解除することはできません。
再入力 Widget のカスタマイズ
プロパティインスペクターでは、再入力検証 Widget の簡単な編集は可能ですが、カスタマイズされたスタイル設定タスクはサポートされません。再入力検証 Widget の CSS ルールを変更すると、自由にスタイル設定した Widget を作成できます。高度なスタイル設定タスクについて詳しくは、www.adobe.com/go/learn_dw_spryconfirm_custom_jp を参照してください。
次のトピックに登場する CSS ルールは、すべて SpryValidationConfirm.css ファイルに格納された初期設定ルールです。Spry 再入力検証 Widget を作成すると、Dreamweaver によってサイトの SpryAssets フォルダーに SpryValidationConfirm.css ファイルが保存されます。このファイルには、その Widget に適用される様々なスタイルに関するコメント付き情報も格納されています。このため、このファイルを参照すると役に立ちます。
注意：
再入力検証 Widget に関するルールは、対応する CSS ファイルで直接編集することもできますが、CSS スタイルパネルを使用して Widget の CSS を編集することもできます。CSS スタイルパネルでは、Widget の様々な部分に割り当てられた CSS クラスを見つけやすくなっています。特に「現在」モードがこの点に優れています。
再入力検証 Widget のスタイル設定（概要説明）
-
SpryValidationConfirm.css ファイルを開きます。
-
Widget に変更を加える部分に関する CSS ルールを見つけます。例えば、再入力 Widget の必須状態を示す背景色を変更するには、SpryValidationConfirm.css ファイルの input.confirmRequiredState を編集します。
-
CSS に必要に応じた変更を加え、ファイルを保存します。
SpryValidationConfirm.css ファイルには、コードや特定のルールの用途について説明する充実したコメントが含まれています。詳しくは、ファイル内のコメントを参照してください。
再入力検証 Widget のエラーメッセージのテキストスタイル設定
再入力検証 Widget のエラーメッセージは、初期設定では、1 ピクセルの実線ボーダーで囲まれた赤いテキストで表示されます。
-
再入力検証 Widget のエラーメッセージのテキストスタイルを変更するには、次の表を使用して適切な CSS ルールを見つけ、初期設定プロパティを変更するか、または独自のテキストスタイルプロパティおよび値を追加します。
変更するテキスト
関連する CSS ルール
変更する関連プロパティ
エラーメッセージのテキスト
.confirmRequiredState .confirmRequiredMsg、.confirmInvalidState .confirmInvalidMsg color: #CC3333; border: 1px solid #CC3333;
再入力検証 Widget の背景色の変更
-
様々な状態の再入力検証 Widget の背景色を変更するには、次の表を使用して適切な CSS ルールを見つけ、初期設定の背景色値を変更します。
変更する色
関連する CSS ルール
変更する関連プロパティ
有効状態の Widget の背景色
.confirmValidState input、input.confirmValidState background-color: #B8F5B1;
無効状態の Widget の背景色
input.confirmRequiredState、.confirmRequiredState input、input.confirmInvalidState、.confirmInvalidState input background-color: #FF9F9F;
フォーカスがある Widget の背景色
.confirmFocusState input、input.confirmFocusState background-color: #FFFFCC;
