バックグラウンド情報

必須の入力検証を使用すると、[必須] プロパティを [=true] に設定することで、コントロールへの入力が必須であることを実行時にユーザーに通知できます。また、[必須に関するエラー メッセージ] プロパティを使用することで、実行時にコントロールが入力されていない場合に表示するエラー メッセージを設定できます。
新しい [ラベル] プロパティを使用して、コントロールの横にテキストを追加できます。[スタイル] タブの [ラベル配置] プロパティを使用することで、コントロールの上または左にラベルを配置できます。
このプロパティは、現在次の入力コントロールで使用できます。

• 日付の選択
• ドロップダウン
• ファイル ピッカー
• 複数選択ドロップダウン
• ラジオ ボタン
• スライダー
• テキスト領域
• テキストボックス

📘

注:

コンテナー コントロールには [有効かどうか] プロパティもあります。
コンテナー コントロールの [有効かどうか] プロパティは、コンテナーを構成するすべてのコントロールに適用されます。

以下の演習では、必須の入力検証を使用して簡易なフォームを作成します。この演習では、必須の入力検証の仕組みについて理解を深め、アプリ内で効率的に使用する方法を習得できます。

必須の入力検証を使用してフォームを構築する

手順

1. 既存のアプリケーションを開くか、新しいアプリケーションを開始します。
2. [ボタン] コントロールをアプリに追加します。
   • [テキスト] プロパティに Subscribe を追加します。
3. 新しい空のページをアプリに追加します。
   • ページの名前を Subscribe Page に変更します。
4. ページの上部に [ヘッダー] 表示コントロールを追加します。
   • [テキスト] プロパティに Subscribe to this app を追加します。
5. ヘッダーの下に [テキストボックス] コントロールを追加します。
   • Name に名前を変更します。
   • [ラベル] プロパティに Name: を追加します。
   • [検証] の [必須] プロパティを =true に設定します。
6. [名前] テキストボックスの下に [テキストボックス] コントロールを追加します。
   • Email に名前を変更します。
   • [ラベル] プロパティに Email: を追加します。
   • [検証] の [必須] プロパティを =true に設定します。
7. 最後のテキストボックスの下に [日付の選択] コントロールを追加します。
   • Date of birth に名前を変更します。
   • [ラベル] プロパティに Date of birth: を追加します。
   • [検証] の [必須] プロパティを =true に設定します。

📘

注:

これらの各コントロールには [有効かどうか] プロパティがあります。このプロパティは、コントロールが有効かどうかを通知します。
既定では、コントロールの [必須] プロパティが =true に設定されている場合、コントロールは有効ではなくなります。

8. 日付の選択の下に [ボタン] コントロールを追加します。
   • [テキスト] プロパティに Submit を追加します。
   • [無効] プロパティで、前に設定したコントロールの [有効かどうか] プロパティを使用して、式 =! Name.isValid || !Email.isValid || !Date of birth.isValid を構築します。

9. メイン ページから [通知を受け取る] ボタンに移動し、[クリック時] イベントを設定します。
   • [ページを開く] ルールを追加します。
   • [開くページ] フィールドに Subscribe Page を追加します。
   • [ポップオーバーとして表示 (モーダル)] チェックボックスをオンにします。

手順の結果

上記のすべての手順を実行すると、アプリをプレビューできます。
プレビュー モードで、[通知を受け取る] ボタンをクリックすると、Subscribe Page が開きます。[送信] ボタンは無効化されており、必須のフィールドがすべて入力されると有効化されます。

📘

注:

いずれかのフィールドに値を入力して削除すると、エラー メッセージが表示され、再度ボタンが無効化されます。