フォームとバリデーションを行う

Blazor WebAssembly アプリケーションで フォームの検証を実装します。 画面はアプリケーションを 実行した画面です。 このまま「送信」ボタンを押すと、 このように「名前を入力してください。」 「住所を入力してください。」 というチェックが行われ、 警告が表示されます。 住所の欄は 文字数によって チェックを行います。 それではソースコードを確認してみます。 フォームですが、 EditForm というタグから 始まっています。 フォームの終了には、 EditForm の閉じタグがあります。 Model として モデルとなるデータを設定しています。 この小文字から始まる model は C#Code で フィールドとして記述しており、 SampleModel というクラスの インスタンスが格納されています。 ７行目には、 DataAnnotationsValidator と ValidationSummary という タグが記述されています。 その後にバリデーションを行う フォームが続きます。 名前は bind-Value として 先ほどの model の Name そして住所には Address がバインドされています。 これらのフィールドに設定されている 検証内容を検証します。 それでは実際に SampleModel では どのような定義が行われているか 確認しましょう。 SampleModel.cs ファイルを 開きました。 SampleModel というクラスが 定義されており、 Name と Address という ２つのフィールドがあります。 これは先ほどの BindValue で設定していたフィールドです。 それぞれ Required これは必須であるという意味です。 もうひとつは StringLength 文字数の制限をかけています。 そして制限に ひっかかった場合は エラーメッセージとして 表示するメッセージを設定しています。 「名前を入力してください。」 「住所を入力してください。」 「４文字以内で入力してください」 というような表示が行われます。 検証できる項目や 検証のカスタマイズ、 そして検証を適用できるコントロールなどは Microsoft の公式ドキュメントの 「ASP.NET Core Blazor の…