必須の入力検証を使用する

バックグラウンド情報

必須の入力検証を使用すると、[必須] プロパティを [=true] に設定することで、コントロールへの入力が必須であることを実行時にユーザーに通知できます。また、[必須に関するエラー メッセージ] プロパティを使用することで、実行時にコントロールが入力されていない場合に表示するエラー メッセージを設定できます。

新しい [ラベル] プロパティを使用して、コントロールの横にテキストを追加できます。[スタイル] タブの [ラベル配置] プロパティを使用することで、コントロールの上または左にラベルを配置できます。

このプロパティは、現在次の入力コントロールで使用できます。

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

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

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

手順

1. 既存のアプリケーションを開くか、新しいアプリケーションを開始します。

2. [ボタン] コントロールをアプリに追加します。

   • [テキスト] プロパティに「Subscribe」を追加します。
     
     

     

     
     

3. 新しい空のページをアプリに追加します。

   • ページの名前を Subscribe Page に変更します。

4. ページの上部に [ヘッダー] 表示コントロールを追加します。

   • [テキスト] プロパティに「Subscribe to this app」を追加します。

5. ヘッダーの下に [テキストボックス] コントロールを追加します。

   • Name に名前を変更します。
   • [ラベル] プロパティに Name: を追加します。
   • [検証] の [必須] プロパティを =true に設定します。

6. [名前] テキストボックスの下に [テキストボックス] コントロールを追加します。

   • Email に名前を変更します。
   • [ラベル] プロパティに Email: を追加します。
   • [検証] の [必須] プロパティを =true に設定します。

最後のテキストボックスの下に [日付の選択] コントロールを追加します。

• Date of birth に名前を変更します。
• [ラベル] プロパティに Date of birth: を追加します。

[検証] の [必須] プロパティを =true に設定します。

注:

これらの各コントロールには [有効かどうか] プロパティがあります。このプロパティは、コントロールが有効かどうかを通知します。

既定では、コントロールの [必須] プロパティが =true に設定されている場合、コントロールは有効ではなくなります。

1. 日付の選択の下に [ボタン] コントロールを追加します。

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

     

     
     

2. メイン ページから [通知を受け取る] ボタンに移動し、[クリック時] イベントを設定します。

   • [ページを開く] ルールを追加します。
   • [開くページ] フィールドに Subscribe Page を追加します。

   • [ポップオーバーとして表示 (モーダル)] チェックボックスをオンにします。

     
     

     

     
     

手順の結果

上記のすべての手順を実行すると、アプリをプレビューできます。

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

注:

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