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

バックグラウンド情報

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

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

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

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

注:

コンテナー コントロールには [有効かどうか] プロパティもあります。

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

図 1.

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

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

手順

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

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

既定では、コントロールの [必須] プロパティが =true に設定されている場合、コントロールは有効ではなくなります。
図 2.
日付の選択の下に [ボタン] コントロールを追加します。
- [テキスト] プロパティに「Submit」を追加します。
- [無効] プロパティで、前に設定したコントロールの [有効かどうか] プロパティを使用して、式 =! Name.isValid || !Email.isValid || !Date of birth.isValid を構築します。
メインページから [通知を受け取る] ボタンに移動し、[クリック時] イベントを設定します。
- [ページを開く] ルールを追加します。
- [開くページ] フィールドに Subscribe Page を追加します。
- [ポップオーバーとして表示 (モーダル)] チェックボックスをオンにします。