【Blazor】 検証付きフォームの作成方法

Blazorで用意されているEditFormコンポーネントを使用して、名前と電子メールを入力するフォームを作成していきます。

<EditForm Model="formData" OnSubmit="Submit">

    <div class="form-group">
        <label for="name">名前</label>
        <InputText id="name" class="form-control" @bind-Value="formData.Name" />
    </div>

    <div class="form-group">
        <label for="email">電子メール</label>
        <InputText id="email" class="form-control" @bind-Value="formData.Email" />
    </div>

    <button type="submit" class="btn btn-primary">送信</button>

    <p>@sendMessage</p>

</EditForm>

@code {

    private FormData formData = new FormData();

    private string? sendMessage;

    private void Submit()
    {
        sendMessage = "フォームが送信されました。";
    }

    private class FormData
    {
        public string Name { get; set; }

        public string Email { get; set; }
    }

}

EditFormの要素には、Model属性とOnSummit属性を指定します。 Model属性には、フォームで入力された情報を格納するクラスのインスタンスを指定し、 OnSubmit属性には、フォームの内容の送信する処理を指定します。

このコードでは、送信処理にOnSubmit属性を使用しています。 OnSubmit属性ではフォームが正しく入力されているかの検証を実行しません。 検証するパターンもこの記事で紹介しますので、ご安心ください。

他の属性には、以下のような種類があります。

それでは実行してみます。フォームが表示されて、ボタンを押すと[フォームが送信されました。]のメッセージが表示されます。

一般的に、フォームには検証機能が備わっているものが多いです。 しかしながら、先ほど作成したフォームでは、未入力でも送信することができてしまいます。

そのため、先ほど作成したフォームに検証機能を追加していきます。

Submit属性を変更

EditFormコンポーネントのOnSubmit属性をOnValidSubmit属性へ変更します。 変更することで、検証成功時のみ送信処理を行うようになります。

それに合わせて、Submitメソッドの名称もValidSubmitメソッドへ変更しておきます。

    ---- 省略 ----

<EditForm Model="formData" OnValidSubmit="ValidSubmit">

    ---- 省略 ----

</EditForm>

@code {

    ---- 省略 ----

    private void ValidSubmit()
    {
        sendMessage = "フォームが送信されました。";
    }

    ---- 省略 ----

}

検証用のアノテーションを付与する

ModelクラスであるFormDataクラスのプロパティにアノテーションを付与していきます。

Nameプロパティには入力必須であるRequired属性を付与し、 EmailにはRequired属性とメールアドレス形式かどうか確認するEmailAddress属性を付与します。

各属性の引数であるErrorMessageには、検証失敗時に表示するメッセージを入力します。

private class FormData
{
    [Required(ErrorMessage = "名前を入力してください。")]
    public string Name { get; set; }

    [Required(ErrorMessage = "電子メールを入力してください。")]
    [EmailAddress(ErrorMessage = "有効な電子メールアドレスを入力してください。")]
    public string Email { get; set; }
}

その他の代表的な検証属性には、次のようなものがあります。

アノテーション検証コンポーネントを追加

アノテーションによる検証を行うために、DataAnnotationsValidatorコンポーネントを追加します。 これを追加することで、Modelに先ほど付与したアノテーション属性を元にバリデーションを行ってくれるようになります。

また、検証時に失敗したエラーメッセージを表示するために、ValidationMessageコンポーネントを追加します。 エラーメッセージはアノテーションを付与したときに、設定した文字列が表示されます。

<EditForm Model="formData" OnValidSubmit="ValidSubmit">

    @* アノテーションによる検証で必要 *@
    <DataAnnotationsValidator />

    <div class="form-group">
        <label for="name">名前</label>
        <InputText id="name" class="form-control" @bind-Value="formData.Name" />
    </div>
    @* 検証でエラーが発生した際のメッセージ *@
    <ValidationMessage For="@(() => formData.Name)" />

    <div class="form-group">
        <label for="email">電子メール</label>
        <InputText id="email" class="form-control" @bind-Value="formData.Email" />
    </div>
    @* 検証でエラーが発生した際のメッセージ *@
    <ValidationMessage For="@(() => formData.Email)" />

    <button type="submit" class="btn btn-primary">送信</button>

    <p>@sendMessage</p>

</EditForm>
}

これでコードの準備は完了です。

コード全体の確認

これまでの説明までのコード全体を確認します。間違いがないかどうかを確認してみてください。

@page "/"

@using System.ComponentModel.DataAnnotations;

<EditForm Model="formData" OnValidSubmit="ValidSubmit">

    @* アノテーションによる検証で必要 *@
    <DataAnnotationsValidator />

    <div class="form-group">
        <label for="name">名前</label>
        <InputText id="name" class="form-control" @bind-Value="formData.Name" />
    </div>
    @* 検証でエラーが発生した際のメッセージ *@
    <ValidationMessage For="@(() => formData.Name)" />

    <div class="form-group">
        <label for="email">電子メール</label>
        <InputText id="email" class="form-control" @bind-Value="formData.Email" />
    </div>
    @* 検証でエラーが発生した際のメッセージ *@
    <ValidationMessage For="@(() => formData.Email)" />

    <button type="submit" class="btn btn-primary">送信</button>

    <p>@sendMessage</p>

</EditForm>

@code {

    private FormData formData = new FormData();

    private string? sendMessage;

    private void ValidSubmit()
    {
        sendMessage = "フォームが送信されました。";
    }

    private class FormData
    {
        [Required(ErrorMessage = "名前を入力してください。")]
        public string Name { get; set; }

        [Required(ErrorMessage = "電子メールを入力してください。")]
        [EmailAddress(ErrorMessage = "有効な電子メールアドレスを入力してください。")]
        public string Email { get; set; }
    }

}

それでは、実行してみます。 名前は未入力、メールアドレスは不正な文字列を入力して、送信ボタンを押した際に検証が行われることを確認します。

検証できていることが確認できました。是非色々なフォームを作って検証してみてください。