注意:

Spry Widget は、Dreamweaver CC 以降では jQuery Widget に置き換えられています。既存の Spry Widget を変更できますが、新しい Spry Widget を追加することはできません。

チェックボックス検証 Widget について

Spry チェックボックス検証 Widget は、ユーザーが HTML フォーム内のあるチェックボックスを選択したとき、または選択しなかったときに、有効状態または無効状態を表示する(単独またはグループの)チェックボックスです。例えば、ユーザーが 3 つのオプションを選択する必要があるフォームにチェックボックス検証 Widget を追加します。ユーザーが 3 つのオプションを選択していない場合は、最小選択数が満たされていないことを示すメッセージが返されます。

次にチェックボックス検証 Widget の例を示します。この例では有効状態を示しています。

様々な状態のチェックボックス検証 Widget
様々な状態のチェックボックス検証 Widget

A. チェックボックス検証 Widget グループ、最小選択数状態 B. チェックボックス検証 Widget、必須状態 

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

イニシャル状態

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

有効状態

ユーザーが適切な数のオプションを選択し、フォームを送信できるようになったときの Widget の状態。

必須状態

ユーザーが必要な数のオプションを選択し忘れたときの Widget の状態。

最小選択数状態

ユーザーが選択したチェックボックスの数が必要最小数に満たないときの Widget の状態。

最大選択数状態

ユーザーが選択したチェックボックスの数が許容最大数を超えているときの Widget の状態。

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

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

チェックボックス検証 Widget の動作およびコードについて詳しくは、www.adobe.com/go/learn_dw_sprycheckbox_jp を参照してください。

チェックボックス検証 Widget の挿入と編集

チェックボックス検証 Widget の挿入

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

注意:

挿入パネルの「Spry」カテゴリを使用してチェックボックス検証 Widget を挿入することもできます。

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

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

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

    onBlur

    ユーザーがチェックボックスの外側をクリックしたときに常に検証します。

    onChange

    ユーザーが選択したときに検証します。

    onSubmit

    ユーザーがフォームの送信を試みたときに検証します。送信オプションは初期設定で選択され、選択解除することはできません。

選択オプション数の範囲の指定

初期設定では、チェックボックス検証 Widget が初期設定で必須になるように設定されます。ただし、ページに複数のチェックボックスを挿入する場合は、選択オプション数の範囲を指定できます。例えば、1 つのチェックボックス検証 Widget の <span> タグ内に 6 つのチェックボックスがあり、ユーザーに 3 つ以上のチェックボックスを選択させたい場合は、Widget 全体にそのような環境設定を指定できます。

  1. ドキュメントウィンドウで、チェックボックス検証 Widget を選択します。
  2. プロパティインスペクター(ウィンドウ/プロパティ)で、「範囲を適用」オプションを選択します。
  3. ユーザーに選択させたい最小または最大チェックボックス数(またはその両方)を入力します。

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

  1. ドキュメントウィンドウで、チェックボックス検証 Widget を選択します。
  2. プロパティインスペクター(ウィンドウ/プロパティ)で、プレビューの状態ポップアップメニューから表示する状態を選択します。例えば、初期状態の Widget を表示する場合は「イニシャル」を選択します。

チェックボックス検証 Widget のエラーメッセージのカスタマイズ

チェックボックス検証 Widget のエラーメッセージは、初期設定では、1 ピクセルのボーダーで囲まれた赤いテキストで表示されます。チェックボックス検証 Widget の CSS を変更すると、自由にスタイル設定した Widget を作成できます。高度なスタイル設定タスクについて詳しくは、www.adobe.com/go/learn_dw_sprycheckbox_custom_jp を参照してください。

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

    Spry チェックボックス検証 Widget を作成すると、Dreamweaver によってサイトの SpryAssets フォルダーに SpryValidationCheckbox.css ファイルが保存されます。このファイルには、その Widget に適用される様々なスタイルに関するコメント付き情報も格納されています。このため、このファイルを参照すると役に立ちます。

  2. 次の表を使用して適切な CSS ルールを見つけ、初期設定プロパティを変更するか、または独自のテキストスタイルプロパティおよび値を追加します。

    スタイルを設定するテキスト

    関連する CSS ルール

    変更する関連プロパティ

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

    .checkboxRequiredState .checkboxRequiredMsg、.checkboxMinSelectionsState .checkboxMinSelectionsMsg、.checkboxMaxSelectionsState .checkboxMaxSelectionsMsg

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

    注意:

    チェックボックス検証 Widget に関するルールは、対応する CSS ファイルで直接編集することもできますが、CSS スタイルパネルを使用して Widget の CSS を編集することもできます。CSS スタイルパネルでは、Widget の様々な部分に割り当てられた CSS クラスを見つけやすくなっています。特に「現在」モードがこの点に優れています。

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

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