Validação de Forms no Blazor

Nesse artigo vamos ver como funcionam as validações de formulários no Blazor. Para isso é importante que você esteja familiarizado com dois conceitos.

O Componente EditForm do Blazor, e os recursos de validação do dotnet conhecidos por DataAnnotations. Nesse artigo vamos partir do exemplo criado nesse artigo aqui, sobre Formulários Blazor.

Aplicando DataAnnotations no Model

Vamos começar adicionando as nossas regras de validação na classe Cliente do nosso Modelo. Para isso usaremos o recurso de DataAnnotations. Veja na Figura 1.

Figura 1: Aplicando DataAnnotations na Classe Cliente

Veja que estamos aplicando cinco regras de validação nessa classe. Estamos usando o Required para definir que as propriedades Nome e Email são de preenchimento obrigatório. Na propriedade Nome também estamos usando o StringLength, para limitar o tamanho do Nome em 20 caracteres.

A propriedade Telefone foi marcada com a anotação Phone, para validar se ele é um número de Telefone bem formado. E o mesmo foi feito com o Email, onde nesse caso usamos o EmailAddress.

DataAnnotationsValidator e ValidationSummary

No Blazor essas validações serão interpretadas pelo componente EditForm. Precisamos apenas fazer uma pequena configuração no formulário.

Sendo assim, abra o Componente ClienteForm.razor, e adicione os componentes DataAnnotationsValidator e ValidationSummary, como você pode ver na Figura 2.

Figura 2: Habilitando validações no EditForm

O componente DataAnnotationsValidator serve para sinalizar ao EditForm que ele deve interpretar as anotações inseridas no Model, que nesse caso é a nossa classe Cliente.

Já o componente ValidationSummary irá apresentar as mensagens de validação que forem geradas pelo DataAnnotations.

Testando

Execute o seu projeto e navegue ao componente \cliente. Antes de preencher o formulário, clique no botão Submit.

Veja, como mostra a Figura 3, que as duas propriedades configuradas como obrigatórias com o Required, ficaram destacadas em vermelho. E duas mensagens de validação apareceram no ValidationSummary.

Figura 3: Testando o Required do Nome e do E-Mail

Em seguida vamos preencher o formulário com dados inválidos, para forçar as outras validações. Veja na Figura 4.

Figura 4: Testando o StringLength, Phone e EmailAddress

Veja as mensagens que aparecem se o Nome tiver mais de 20 caracteres, o Telefone não for um número valido, e o Email não estiver bem formado.

Para fechar os nossos testes, preencha corretamente todos os campos, e veja como mostra a Figura 5, que com todas as informações válidas, o Form é corretamente submetido.

Figura 5: Nenhum erro de validação encontrado pelo Form

Concluindo

Essa é uma forma bem elegante e simples de aplicar validações em formulários Blazor.

Uma das melhorias que podemos fazer, é customizar as mensagens de validação para que sejam apresentadas em português. Veremos isso no próximo artigo.

Grande Abraço e até lá!

3 comentários em “Validação de Forms no Blazor

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s