注意:

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 の挿入

  1. 挿入/Spry/Spry 再入力検証を選択します。
  2. Input タグのアクセシビリティ属性ダイアログボックスに情報を入力し、「OK」をクリックします。

注意:

挿入パネルの「Spry」カテゴリを使用して再入力検証 Widget を挿入することもできます。

再入力検証 Widget の必須状態の変更

初期設定では、Dreamweaver で挿入した再入力検証 Widget を Web ページ上にパブリッシュすると、ユーザー入力が必須になります。ただし、再入力テキストフィールドの入力をオプションにすることもできます。

  1. ドキュメントウィンドウで、再入力検証 Widget の青いタブをクリックして選択します。
  2. プロパティインスペクター(ウィンドウ/プロパティ)で、「必須」チェックボックスを必要に応じてオンまたはオフにします。

検証対象テキストフィールドの指定

  1. ドキュメントウィンドウで、再入力検証 Widget の青いタブをクリックして選択します。
  2. プロパティインスペクター(ウィンドウ/プロパティ)で、検証対象ポップアップメニューから、検証の対象とするテキストフィールドを選択します。このポップアップメニューには、固有の ID を割り当てたすべてのテキストフィールドが表示されます。

デザインビューでの Widget の状態の表示

  1. ドキュメントウィンドウで、再入力検証 Widget の青いタブをクリックして選択します。
  2. プロパティインスペクター(ウィンドウ/プロパティ)で、プレビューの状態ポップアップメニューから表示する状態を選択します。例えば、有効状態でこの Widget を表示する場合は「有効」を選択します。

検証を実行するタイミングの指定

検証がどの時点で実行されるかを指定できます。指定できるのは、サイトビジターが Widget の外側をクリックしたとき、ユーザーが入力すると同時、またはユーザーがフォームの送信を試みたときのいずれかです。

  1. ドキュメントウィンドウで、再入力検証 Widget の青いタブをクリックして選択します。
  2. プロパティインスペクター(ウィンドウ/プロパティ)で、検証をどの時点で行うかを指定するオプションを選択します。すべてのオプションを選択することも、「送信」のみを選択することもできます。

    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 のスタイル設定(概要説明)

  1. SpryValidationConfirm.css ファイルを開きます。

  2. Widget に変更を加える部分に関する CSS ルールを見つけます。例えば、再入力 Widget の必須状態を示す背景色を変更するには、SpryValidationConfirm.css ファイルの input.confirmRequiredState を編集します。

  3. CSS に必要に応じた変更を加え、ファイルを保存します。

SpryValidationConfirm.css ファイルには、コードや特定のルールの用途について説明する充実したコメントが含まれています。詳しくは、ファイル内のコメントを参照してください。

再入力検証 Widget のエラーメッセージのテキストスタイル設定

再入力検証 Widget のエラーメッセージは、初期設定では、1 ピクセルの実線ボーダーで囲まれた赤いテキストで表示されます。

  1. 再入力検証 Widget のエラーメッセージのテキストスタイルを変更するには、次の表を使用して適切な CSS ルールを見つけ、初期設定プロパティを変更するか、または独自のテキストスタイルプロパティおよび値を追加します。

    変更するテキスト

    関連する CSS ルール

    変更する関連プロパティ

    エラーメッセージのテキスト

    .confirmRequiredState .confirmRequiredMsg、.confirmInvalidState .confirmInvalidMsg

    color: #CC3333; border: 1px solid #CC3333;

再入力検証 Widget の背景色の変更

  1. 様々な状態の再入力検証 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;

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー