Image for post Guía Completa para Implementar Validaciones de Formularios en React con Yup y Formik

Guía Completa para Implementar Validaciones de Formularios en React con Yup y Formik

Escrito por Sergio Márquez

La validación de formularios es un aspecto crítico en el desarrollo de aplicaciones web, ya que garantiza que los datos introducidos por los usuarios sean correctos y estén en el formato esperado. En este artículo, exploraremos cómo implementar validaciones de formularios en aplicaciones React utilizando dos bibliotecas populares: Yup para la validación de esquemas y Formik para la gestión de formularios.

¿Qué es Formik?

Formik es una biblioteca que facilita la creación y gestión de formularios en React. Proporciona herramientas y métodos que simplifican la recopilación de datos, la validación y la gestión del estado del formulario.

¿Qué es Yup?

Yup es una biblioteca de validación de esquemas que permite definir validaciones de una manera declarativa. Puedes crear esquemas de validación que se integran fácilmente con Formik para validar los datos del formulario.

Instalación

npm install formik yup

Configurando Formik y Yup en tu Componente

Primero, necesitaremos importar Formik y Yup en nuestro componente, y luego definir nuestro esquema de validación:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

// Definimos el esquema de validación
const validationSchema = Yup.object().shape({
  email: Yup.string().email('Email no válido').required('El email es obligatorio'),
  password: Yup.string().min(6, 'La contraseña debe tener al menos 6 caracteres').required('La contraseña es obligatoria'),
});

Creando el Formulario

A continuación, utilizaremos Formik para crear nuestro formulario y aplicaremos las validaciones definidas en el esquema de Yup:

const MyForm = () => {
  return (
     {
        console.log(values);
      }}
    >
      {() => (
        
          

            Email
            
            
          

          

            Contraseña
            
            
          

          Enviar
        
      )}
    
  );
};

Ejemplo Completo

Aquí tienes un ejemplo completo donde utilizamos Formik y Yup para gestionar un formulario de inicio de sesión:

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
  email: Yup.string().email('Email no válido').required('El email es obligatorio'),
  password: Yup.string().min(6, 'La contraseña debe tener al menos 6 caracteres').required('La contraseña es obligatoria'),
});

const LoginForm = () => {
  return (
     {
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {() => (
        
          

            Email
            
            
          

          

            Contraseña
            
            
          

          Enviar
        
      )}
    
  );
};

Conclusiones

La combinación de Formik y Yup permite crear formularios potentes y fáciles de usar en React. Con la configuración adecuada, podrás gestionar la validación de datos eficientemente, mejorando la experiencia del usuario y la calidad de los datos que tu aplicación maneja.

Volver al blog