Validación de Formularios en Blazor

Introducción

La validación de formularios es crucial para garantizar la integridad y la precisión de los datos ingresados por los usuarios en una aplicación web. En este tutorial, aprenderás cómo implementar la validación de formularios en una aplicación Blazor Server utilizando tanto las anotaciones de datos como los validadores personalizados.

Paso 1: Anotaciones de Datos para la Validación

Blazor Server utiliza las mismas anotaciones de datos que ASP.NET Core para validar los modelos en el lado del servidor. Puedes aplicar estas anotaciones a las propiedades de tus modelos de datos para especificar reglas de validación.

public class Usuario
{
    [Required(ErrorMessage = "El campo Nombre es obligatorio")]
    public string Nombre { get; set; }

    [EmailAddress(ErrorMessage = "El campo Correo electrónico no es una dirección de correo electrónico válida")]
    public string CorreoElectronico { get; set; }
}

Paso 2: Mostrar Mensajes de Error en el Formulario

Puedes usar el componente ValidationMessage de Blazor para mostrar mensajes de error asociados con propiedades de un modelo de datos.

<input @bind="usuario.Nombre" />
<ValidationMessage For="@(() => usuario.Nombre)" />

Paso 3: Validadores Personalizados

Además de las anotaciones de datos integradas, puedes crear validadores personalizados para aplicar reglas de validación personalizadas.

public class EdadMinimaAttribute : ValidationAttribute
{
    private readonly int _edadMinima;

    public EdadMinimaAttribute(int edadMinima)
    {
        _edadMinima = edadMinima;
    }

    protected override ValidationResult IsValid(object value, ValidationContext validationContext)
    {
        if (value != null)
        {
            var fechaNacimiento = (DateTime)value;
            if (fechaNacimiento > DateTime.Now.AddYears(-_edadMinima))
            {
                return new ValidationResult($"Debes tener al menos {_edadMinima} años de edad");
            }
        }
        return ValidationResult.Success;
    }
}

Paso 4: Uso de Validadores Personalizados en Modelos de Datos

Puedes aplicar validadores personalizados a las propiedades de tus modelos de datos utilizando las anotaciones de datos personalizadas.

public class Usuario
{
    [EdadMinima(18, ErrorMessage = "Debes tener al menos 18 años de edad")]
    public DateTime FechaNacimiento { get; set; }
}

Conclusiones

La validación de formularios es esencial para garantizar la integridad de los datos en una aplicación web. En este tutorial, has aprendido cómo implementar la validación de formularios en una aplicación Blazor Server utilizando tanto las anotaciones de datos como los validadores personalizados. Con estos conocimientos, podrás crear formularios robustos y fiables que proporcionen una experiencia de usuario excelente y libre de errores.