Volver a la p谩gina principal
lunes 23 septiembre 2024
92

C贸mo validar formularios con Yup en React

La validaci贸n de formularios es una parte crucial en cualquier aplicaci贸n web, ya que garantiza que los datos proporcionados por el usuario sean correctos antes de ser procesados. En proyectos React, una de las formas m谩s eficientes de manejar la validaci贸n de formularios es utilizando la librer铆a Yup. Yup, en conjunto con Formik, ofrece una soluci贸n poderosa y declarativa para validar formularios de manera sencilla.

驴Qu茅 es Yup?

Yup es una biblioteca de validaci贸n de esquemas que te permite definir la estructura y las reglas de validaci贸n de un conjunto de datos. Se integra perfectamente con React y otras bibliotecas populares como Formik, facilitando la validaci贸n de formularios complejos. Yup funciona creando un esquema que describe c贸mo deben ser los datos y luego aplicando este esquema para validar dichos datos.

Caracter铆sticas clave de Yup:

  • Definici贸n de esquemas para estructuras de datos complejas.
  • Validaci贸n sincr贸nica y as铆ncrona.
  • F谩cil integraci贸n con bibliotecas como Formik.
  • Mensajes de error personalizados.
  • Soporte para m煤ltiples tipos de datos como cadenas, n煤meros, fechas, arreglos, entre otros.

Instalaci贸n de Yup

Para comenzar a utilizar Yup en tu proyecto React, primero debes instalarlo a trav茅s de npm o yarn. Adem谩s, se recomienda instalar Formik para gestionar el estado de los formularios de manera eficiente. 

npm install yup formik

O si prefieres usar yarn: 

yarn add yup formik

Creando un formulario con Formik y Yup

A continuaci贸n, vamos a construir un formulario simple en React que incluya la validaci贸n de campos utilizando Yup y Formik.

1. Configurando el formulario en React

Vamos a crear un formulario con los siguientes campos:

  • Nombre: Debe ser obligatorio y tener al menos 3 caracteres.
  • Correo electr贸nico: Debe tener un formato v谩lido.
  • Contrase帽a: Debe ser obligatoria y tener un m铆nimo de 8 caracteres.

Primero, crea un archivo FormValidation.js donde construiremos nuestro formulario. 

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

const FormValidation = () => {
  // Esquema de validaci贸n con Yup
  const validationSchema = Yup.object({
    nombre: Yup.string()
      .min(3, 'El nombre debe tener al menos 3 caracteres')
      .required('El nombre es obligatorio'),
    email: Yup.string()
      .email('Debe ser un correo v谩lido')
      .required('El correo electr贸nico es obligatorio'),
    password: Yup.string()
      .min(8, 'La contrase帽a debe tener al menos 8 caracteres')
      .required('La contrase帽a es obligatoria'),
  });

  // Funci贸n para manejar el env铆o del formulario
  const handleSubmit = (values) => {
    console.log('Formulario enviado con los valores:', values);
  };

  return (
    <div>
      <h1>Formulario de Registro</h1>
      <Formik
        initialValues={{ nombre: '', email: '', password: '' }}
        validationSchema={validationSchema}
        onSubmit={handleSubmit}
      >
        {({ isSubmitting }) => (
          <Form>
            <div>
              <label htmlFor="nombre">Nombre</label>
              <Field type="text" name="nombre" />
              <ErrorMessage name="nombre" component="div" />
            </div>

            <div>
              <label htmlFor="email">Correo Electr贸nico</label>
              <Field type="email" name="email" />
              <ErrorMessage name="email" component="div" />
            </div>

            <div>
              <label htmlFor="password">Contrase帽a</label>
              <Field type="password" name="password" />
              <ErrorMessage name="password" component="div" />
            </div>

            <button type="submit" disabled={isSubmitting}>
              Enviar
            </button>
          </Form>
        )}
      </Formik>
    </div>
  );
};

export default FormValidation;

2. Descripci贸n del c贸digo

1. Formik se utiliza para gestionar el estado del formulario y su manejo. La propiedad initialValues define los valores iniciales de los campos del formulario.

2. Yup define el esquema de validaci贸n en la constante validationSchema, donde cada campo del formulario tiene una regla de validaci贸n espec铆fica.

  • Yup.string().min(3) asegura que el nombre tenga al menos 3 caracteres.
  • Yup.string().email() asegura que el correo tenga un formato v谩lido.
  • Yup.string().min(8) valida que la contrase帽a tenga un m铆nimo de 8 caracteres.

3. Field es un componente de Formik que se encarga de representar los campos del formulario. Formik se encarga de gestionar el estado y las validaciones.

4. ErrorMessage muestra los mensajes de error asociados a cada campo en caso de que no cumplan las reglas de validaci贸n.

3. Ejecuci贸n y pruebas

Al ejecutar este c贸digo en un proyecto React, obtendr谩s un formulario con tres campos: Nombre, Correo electr贸nico y Contrase帽a. Si intentas enviar el formulario sin llenar correctamente los campos, los mensajes de error definidos en Yup aparecer谩n justo debajo de cada campo.

Personalizaci贸n de mensajes de error

Yup te permite personalizar los mensajes de error f谩cilmente. En lugar de usar los mensajes predeterminados, puedes a帽adir mensajes personalizados como lo vimos en el ejemplo anterior. Aqu铆 tienes un ejemplo de c贸mo hacerlo: 

const validationSchema = Yup.object({
  nombre: Yup.string()
    .min(3, 'El nombre es muy corto, debe tener al menos 3 caracteres')
    .required('Por favor, introduce tu nombre'),
  email: Yup.string()
    .email('Introduce un correo v谩lido, por favor')
    .required('El correo electr贸nico es obligatorio'),
  password: Yup.string()
    .min(8, 'Tu contrase帽a debe tener al menos 8 caracteres')
    .required('Por favor, introduce una contrase帽a'),
});

Validaci贸n condicional con Yup

Yup tambi茅n soporta la validaci贸n condicional, lo que significa que puedes establecer reglas de validaci贸n basadas en los valores de otros campos. Aqu铆 tienes un ejemplo en el que se valida que un campo solo sea requerido si otro campo tiene un valor espec铆fico: 

const validationSchema = Yup.object({
  nombre: Yup.string().required('El nombre es obligatorio'),
  mostrarApellido: Yup.boolean(),
  apellido: Yup.string().when('mostrarApellido', {
    is: true,
    then: Yup.string().required('El apellido es obligatorio si seleccionas mostrar apellido'),
    otherwise: Yup.string(),
  }),
});

En este caso, el campo apellido ser谩 obligatorio solo si el campo mostrarApellido est谩 marcado como verdadero.

Validaci贸n as铆ncrona con Yup

En algunos casos, puede que necesites realizar validaciones as铆ncronas, como verificar si un nombre de usuario o correo electr贸nico ya est谩 en uso. Yup permite manejar este tipo de validaciones utilizando promesas. 

const validationSchema = Yup.object({
  username: Yup.string()
    .required('El nombre de usuario es obligatorio')
    .test('checkUsernameUnique', 'Este nombre de usuario ya est谩 en uso', async (value) => {
      const isUnique = await verificarNombreDeUsuario(value);
      return isUnique;
    }),
});

En este ejemplo, verificarNombreDeUsuario es una funci贸n que comprueba si el nombre de usuario ya existe en la base de datos.

Conclusi贸n

Validar formularios en React utilizando Yup es una forma eficiente y flexible de asegurarse de que los datos ingresados por los usuarios sean correctos y cumplan con las reglas esperadas. Al combinar Yup con Formik, puedes crear formularios robustos y con validaci贸n integrada de manera sencilla, mejorando la experiencia del usuario.

En este art铆culo hemos cubierto los fundamentos de Yup, c贸mo implementarlo en React y c贸mo personalizar las reglas de validaci贸n y los mensajes de error. Con estos conocimientos, est谩s listo para mejorar la seguridad y la fiabilidad de los formularios en tus aplicaciones React. 隆Ponte manos a la obra y empieza a validar tus formularios con Yup! 馃槒馃槒

Etiquetas:
javascript react
Compartir:
Creado por:
Author photo

Jorge Garc铆a

Fullstack developer