Cómo crear y validar formularios en React y React Native usando Formik y 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.
Puedes instalar Formik y Yup usando npm. Aquí están los comandos:
npm install formik yup
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:
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.handleSubmit
: Envía los datos al presionar el botón si los datos pasan las validaciones.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.