blazor form Submit validation 방법

Blazor에서 form태그내 서브밋 이벤트가 일어날때 각 모델의 Validation 하는 방법과 어떻게 문구를 노출해야 하는지 알아 보겠습니다.

 

코드

 

모델 코드

public class ExampleModel
    {
        [Required(ErrorMessage ="이름은 필수")]
        [StringLength(10, ErrorMessage ="이름을 10자 이하로 입력하세요.")]
        public string Name { get; set; }    
    }

@page "/blazorform"
@using MyBlazorApp.Model
<h3>BlazorForm</h3>
<EditForm Model="exampleModel" OnValidSubmit="@btnSubmit_Click">
    @*해당 폼에서 모델의 Annotations Validation을 한다.*@
    <DataAnnotationsValidator></DataAnnotationsValidator>
    @*해당 editForm의 Validation문구를 출력한다.0*@
    <ValidationSummary></ValidationSummary>

    <InputText id="txtName" @bind-Value="exampleModel.Name"></InputText>

    @*모델의 특정 필드만 Validation문구를 노출 할 경우*@
    <ValidationMessage For=@(() => exampleModel.Name)></ValidationMessage>\

    <button type="submit">Submit</button>
</EditForm>
<hr />
@exampleModel.Name
@code {
    private ExampleModel exampleModel = new ExampleModel();
    protected override void OnInitialized()
    {
        exampleModel.Name = "test";
    }
    void btnSubmit_Click()
    {
        
    }
}

1. 우선 EditForm에서 어떤 모델을 사용할지 Model속성에 지정해 줍니다.

2. OnValidSubmit에 Submit함수를 지정하면 Validation을 진행 한 후에 Submit이벤트를 발생시킬 수 있다.

3. Form태그 내에 DataAnnotationsValidator태그를 넣어 모델의 Annotation Validation을 처리하도록 지정합니다.

4. ValidationSummary에 모델 Annotation에 지정된 여러 Validation의 메시지가 노출됩니다.

5. ValidationMessage태그의 For속성에 해당 모델의 프로퍼티를 지정하면 해당 필드의 메시지만 출력 할 수 있습니다.