Formularios en React con Formik y Yup

Cómo crear y validar formularios en React y React Native usando Formik y Yup.

formularios-react-formik-yup

Formik es una de las librerías más populares de React para la creación y gestión de formularios. Permite administrar el estado, la validación, el control de errores y el envío de formularios de manera sencilla y declarativa. Formik proporciona hooks y componentes de alto nivel que simplifican estas tareas, reduciendo la necesidad de escribir lógica repetitiva.

Por otro lado, Yup es una librería de validación para JavaScript que se utiliza para definir esquemas de validación declarativos. Trabaja bien con Formik para validar los datos añadidos en formularios. Se pueden definir reglas específicas para cada campo y gestionar los errores automáticamente.

Instalar

Puedes instalar Formik y Yup usando npm. Aquí están los comandos:

Terminal
npm install formik yup

Ejemplo de un formulario de contacto

Aquí hay un ejemplo de un formulario con dos campos: nombre y email. Usamos Formik para gestionar el formulario y Yup para validar los datos:

import React from "react";
import { useFormik } from "formik";
import * as Yup from "yup";
const FormularioEjemplo = () => {
// Definir la validación con Yup
const validationSchema = Yup.object({
nombre: Yup.string()
.min(2, "El nombre debe tener al menos 2 caracteres")
.required("El nombre es obligatorio"),
email: Yup.string()
.email("Debe ser un correo válido")
.required("El correo es obligatorio"),
});
// Configurar Formik
const formik = useFormik({
initialValues: {
nombre: "",
email: "",
},
validationSchema, // Integrar la validación de Yup
onSubmit: (values) => {
console.log(`Formulario enviado: ${JSON.stringify(values, null, 2)}`);
},
});
return (
<form onSubmit={formik.handleSubmit}>
<div>
<label htmlFor="nombre">Nombre:</label>
<input
id="nombre"
name="nombre"
type="text"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.nombre}
/>
{formik.touched.nombre && formik.errors.nombre ? (
<div style={{ color: "red" }}>{formik.errors.nombre}</div>
) : null}
</div>
<div>
<label htmlFor="email">Email:</label>
<input
id="email"
name="email"
type="email"
onChange={formik.handleChange}
onBlur={formik.handleBlur}
value={formik.values.email}
/>
{formik.touched.email && formik.errors.email ? (
<div style={{ color: "red" }}>{formik.errors.email}</div>
) : null}
</div>
<button type="submit">Enviar</button>
</form>
);
};
export default FormularioEjemplo;
  • initialValues: Define los valores iniciales del formulario para nombre y email.
  • validationSchema: Usa Yup para especificar las reglas de validación:
    • El nombre debe tener al menos 2 caracteres y es obligatorio.
    • El email debe tener un formato válido y también es obligatorio.
  • formik.handleChange: Actualiza el estado del formulario cuando el usuario escribe en los campos.
  • formik.handleBlur: Marca un campo como “tocado” para mostrar errores si el campo no cumple las reglas.
  • Errores: Se muestran mensajes de error junto a los campos en caso de que los datos sean inválidos.
  • handleSubmit: Envía los datos al presionar el botón si los datos pasan las validaciones.

Resumen

Estas dos librerías se complementan muy bien. Logrando una clara separación de la lógica de la validación con la definición de los campos de los formularios.