Nesse artigo vamos ver um componente chamado ValidationMessage, que podemos utilizar nos formulários do Blazor para customizar a posição onde as mensagens de validação serão apresentadas.
O Problema
No artigo em que falamos sobre Validação de Forms no Blazor, vimos o componente ValidationSummary, que é usado para exibir uma lista com todos os erros de validação capturados pelo EditForm.
O problema do ValidationSummary é que ele agrupa todas as mensagens de erro em um único lugar. E isso não nos permite separar essas mensagens, para posicioná-las cada uma em um local diferente.
É muito comum criar formulários onde as mensagens de erro fiquem perto do campo que originou o erro, como você pode ver na Figura 1.

A Solução
O componente ValidationMessage serve exatamente para resolver esse problema. Em vez de usar um único ValidationSummary, usamos um ValidationMessage para cada input do nosso formulário.
Veja essa implementação na Figura 2.

Para utilizar o ValidationMessage basta passar para o seu parâmetro For, uma expressão lambda, que referencie a propriedade para a qual será apresentada as mensagens de validação.
O resultado desse exemplo pode ser visto aqui na Figura 3.

Veja que essa é uma forma de apresentar mensagens de validação, bem mais instrutiva ao usuário final da aplicação.
Grande Abraço e até o próximo!
Um comentário em “ValidationMessage no EditForm do Blazor”