Cómo Agregar Validaciones Personalizadas en Zod para React

La validación de formularios es una parte fundamental del desarrollo web y, en particular, de las aplicaciones React. Mientras que React proporciona un enfoque robusto para manejar formularios, la validación de datos puede volverse complicada. Aquí es donde entra en juego Zod, una biblioteca de validación de esquemas que permite definir y validar datos de manera sencilla y elegante. En este artículo, aprenderemos cómo agregar validaciones personalizadas utilizando Zod en nuestros componentes de React.

Introducción a Zod

Zod es una biblioteca de validación de esquemas para TypeScript y JavaScript que nos permite crear esquemas de validación de manera intuitiva. Con Zod, podemos definir la forma de los datos que estamos esperando y validar automáticamente cualquier entrada. Una de las características más poderosas de Zod es la capacidad de definir validaciones personalizadas que se ajusten a nuestras necesidades específicas.

Antes de sumergirnos en la validación personalizada, asegúrate de tener Zod instalado en tu proyecto React. Puedes hacerlo ejecutando:

npm install zod

Una vez que hayas instalado Zod, podrás utilizarlo en tu aplicación para crear validaciones robustas y personalizadas.

Creando un esquema básico con Zod

Para comenzar, veamos cómo crear un esquema básico usando Zod. Supongamos que estamos creando un formulario de registro que necesita validar información de un usuario como un correo electrónico y una contraseña. Primero, definimos nuestro esquema de validación utilizando Zod.

import { z } from 'zod';

const userSchema = z.object({
  email: z.string().email().nonempty({ message: 'El correo electrónico es requerido.' }),
  password: z.string().min(8, { message: 'La contraseña debe tener al menos 8 caracteres.' }),
});

En este ejemplo, hemos creado un esquema simple donde el campo de correo electrónico debe ser una cadena válida que sigue el formato de un correo electrónico y no puede estar vacío. Además, la contraseña debe ser una cadena con al menos 8 caracteres. Zod proporciona mensajes de error que podemos personalizar fácilmente.

Validaciones personalizadas en Zod

A veces, las validaciones básicas no son suficientes, y es posible que necesitemos implementar reglas más complejas. En Zod, esto es bastante sencillo gracias a la función refine, que nos permite agregar validaciones personalizadas a nuestros esquemas.

Por ejemplo, supongamos que queremos asegurarnos de que la contraseña contenga al menos un número y una letra mayúscula. Podemos crear una validación personalizada de la siguiente manera:

const passwordSchema = z.string().min(8).refine((val) => /(?=.*[A-Z])(?=.*[0-9])/.test(val), {
  message: 'La contraseña debe contener al menos un número y una letra mayúscula.',
});

En este código, estamos utilizando una expresión regular para verificar si la contraseña cumple con los criterios necesarios. Si no es así, se mostrará el mensaje de error que especificamos en la función de refine.

Integrando Zod con formularios en React

Ahora que sabemos cómo definir nuestras validaciones, veamos cómo integrarlas en un componente de formulario en React. Supongamos que tenemos un componente de formulario donde los usuarios pueden registrarse. Usaremos el estado y la función de handleSubmit de React para manejar la validación de nuestros datos.

Aquí hay un ejemplo de cómo podríamos implementar esto:

import React, { useState } from 'react';
import { z } from 'zod';

const userSchema = z.object({
  email: z.string().email().nonempty({ message: 'El correo electrónico es requerido.' }),
  password: passwordSchema,
});

const RegisterForm = () => {
  const [formData, setFormData] = useState({ email: '', password: '' });
  const [errors, setErrors] = useState({});

  const handleSubmit = (event) => {
    event.preventDefault();
    const result = userSchema.safeParse(formData);
    if (!result.success) {
      const formattedErrors = result.error.format();
      setErrors(formattedErrors);
    } else {
      // Procesar el envío del formulario
    }
  };

  return (
     setFormData({ ...formData, email: e.target.value })}
    />
    {errors.email ? {errors.email._errors[0]} : null}

     setFormData({ ...formData, password: e.target.value })}
    />
    {errors.password ? {errors.password._errors[0]} : null}

    
   );
};

En este componente, mantenemos el estado para los datos del formulario y los errores. Al enviar el formulario, llamamos a safeParse de Zod, que verifica la validez de nuestros datos. Si no hay éxito, formateamos los errores y los mostramos en el formulario.

Ejemplos de validaciones personalizadas comunes

Hay muchas situaciones donde las validaciones personalizadas son útiles. A continuación, se presentan algunos ejemplos comunes que podrías implementar en tu aplicación.

Validar números de teléfono: Puedes crear un esquema que valide que el número de teléfono se ajuste a un formato específico utilizando expresiones regulares.
Fechas de nacimiento: Asegúrate de que la fecha de nacimiento ingresada cumpla con ciertos criterios, como una edad mínima.
Coincidencia de contraseñas: Implementa una validación que compare dos campos de contraseña para asegurarte de que coinciden.

Aquí te muestro cómo se podría implementar la validación para coincidir contraseñas:

const passwordMatchSchema = z.object({
  password: z.string().min(8),
  confirmPassword: z.string().min(8),
}).refine(data => data.password === data.confirmPassword, {
  message: 'Las contraseñas no coinciden.',
  path: ['confirmPassword'],
});

En este caso, la validación se asegura de que el campo de confirmación coincida con el campo de contraseña original, y se muestra un mensaje de error claro si no lo hace.

Conclusión

Agregar validaciones personalizadas en Zod para aplicarlas a tus formularios React puede ser un gran paso hacia la mejora de la experiencia del usuario y la calidad de tus datos. A través de esquemas flexibles y fáciles de usar, Zod permite manejar la validación de manera eficiente y efectiva. Ya sea que estés lidiando con requisitos de validación simples o complejos, Zod tiene las herramientas que necesitas para llevar a cabo el proceso de manera ordenada y enriquecedora.

En resumen, hemos abarcado cómo configurar esquemas de validación básica, implementar validaciones personalizadas y cómo integrar Zod en un componente React para manejar formularios de manera efectiva. Siguiendo esta guía, estarás mejor preparado para manejar validaciones en tus formularios y crear aplicaciones más robustas y confiables. ¡Feliz codificación!