Validação de formulários com Blazor [PT-BR]
Tags: braziliandevs, dotnet, csharp
Published: 2023-06-23 12:22:13

## 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:

```cs
@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:
```cs
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.