Validação de formulários com Blazor [PT-BR]

Introdução

Neste guia, vamos criar um projeto simples com um formulário que possui validação em Blazor.

Antes de começarmos, é importante verificar a versão do .NET instalada. Para fazer isso, execute o seguinte comando:
dotnet --version

A versão instalada no meu sistema é a seguinte:
7.0.101

Para simplificar o processo, vamos criar um projeto Blazor Server usando o comando a seguir:
dotnet new blazorserver

Criação da tela

Dentro da pasta "Pages", adicione o arquivo "PessoaForm.razor" com o seguinte código:

@page "/pessoa-form"
@using Microsoft.Extensions.Logging
@inject ILogger<Pessoa> Logger

<EditForm EditContext="@editContext" OnSubmit="@HandleSubmit">
    <h2>Formulário de Pessoa</h2>

    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="mb-3">
        <label class="form-label">Nome</label>
        <InputText class="form-control" @bind-Value="pessoa.Nome"/>
    </div>
    <div class="mb-3">
        <label class="form-label">E-mail</label>
        <InputText class="form-control" @bind-Value="pessoa.Email"/>
    </div>
    <div class="mb-3">
        <label class="form-label">Idade</label>
        <InputNumber class="form-control" @bind-Value="pessoa.Idade" />
    </div>

    <button type="submit" class="btn btn-primary">Submit</button>
</EditForm>

@code {
    private Pessoa pessoa = new();
    private EditContext? editContext;
    protected override void OnInitialized()
    {
        editContext = new(pessoa);
    }

    private async Task HandleSubmit()
    {
        if (editContext != null && editContext.Validate())
        {
            Logger.LogInformation("Formulário válido!");

            await Task.CompletedTask;
        }
        else
        {
            Logger.LogInformation("Formulário inválido!");
        }
    }
}

Pontos a serem observados:

• O componente "EditForm" no Blazor é essencial para a criação e manipulação de formulários. Ele permite a vinculação bidirecional de dados, facilita a validação de entrada e fornece uma maneira conveniente de lidar com a submissão de formulários.
• O componente "DataAnnotationsValidator" é responsável por validar as regras de validação definidas nas anotações de dados do modelo associado ao formulário. Ele verifica automaticamente os campos do formulário e exibe mensagens de erro correspondentes.
• O componente "ValidationSummary" exibe um resumo de todos os erros de validação do formulário em um local centralizado, facilitando a visualização e a correção das informações inválidas.
• A classe "EditContext" registra e rastreia os campos que estão sendo editados, permitindo a detecção de alterações e atualizações adequadas nos dados do formulário. Além disso, ele gerencia e exibe mensagens de validação, fornecendo feedback relevante ao usuário sobre erros ou problemas de validação.
• O método editContext.Validate() é usado no Blazor para executar a validação de um formulário associado a um objeto EditContext. Quando chamado, o método Validate() percorre todos os campos do formulário e aplica as regras de validação definidas nas anotações de dados do modelo associado.
• O formulário foi desenvolvido utilizando como base o framework Bootstrap 5.

Criação do modelo

Na pasta "Data" crie um arquivo "Pessoa.cs", com o seguinte código:

using System.ComponentModel.DataAnnotations;

namespace FormValidation.Data;

public class Pessoa 
{
    [Required(ErrorMessage = "O campo {0} é obrigatório")]
    [StringLength(10, ErrorMessage = "O campo {0} é muito longo.")]
    public string? Nome { get; set; } = "";

    [Required(ErrorMessage = "O campo {0} é obrigatório")]
    public string? Email { get; set; } = "";

    [Required(ErrorMessage = "O campo {0} é obrigatório")]
    [Range(1,150, ErrorMessage ="A idade tem que ser entre 1 e 150.")]        
    public int Idade { get; set; }
}

Pontos a serem observados:

• Data Annotations é um recurso do .NET que permite a aplicação de anotações ou atributos diretamente em classes e propriedades de modelo para definir metadados e comportamentos específicos. No caso do nosso modelo essas anotações são usadas para fins de validação de dados, onde podemos definir regras como campos obrigatórios Required, comprimento máximo Range, formato de dados, entre outros.

Conclusão

Neste post exploramos como realizar a validação de formulários no Blazor. Através do uso do componente EditForm, podemos criar formulários interativos com vinculação bidirecional de dados e recursos de validação. Com a ajuda das Data Annotations, podemos definir regras de validação diretamente nas propriedades do modelo, permitindo que o Blazor realize a validação automática dos campos do formulário. Além disso, os componentes DataAnnotationsValidator e ValidationSummary nos auxiliam na exibição de mensagens de erro claras e precisas, garantindo uma experiência do usuário aprimorada. Com essas técnicas e recursos, estamos preparados para criar formulários robustos, confiáveis e amigáveis ao usuário no Blazor.