Crear formulario en React con Formik y validación con YUP

Para mi, muchas veces usar librerías se me hace innecesarias y si es posible evitar usarlas mejor para mi. Esto debido a que estas librerías ralentizar la web y eso afecta al SEO de la página. Y crear un formulario en React puede ser sencillo, sin necesidad de usar

En casi todos los proyectos web es necesario, sea cual sea la temática del proyecto, de alguna forma vamos a necesitar crear un formulario. Como por ejemplo: Enviar un mail con React

En ese proyecto no use ningún tipo de librería que me ayude a hacer las validaciones o el control de estados dentro del formulario. Es bastante sencillo y sirve… Pero las validaciones solo del navegador no son suficiente y más una mejor la experiencia del usuario. Es necesario usar ciertas librerías.

Formik y Yup son dos librerías que juntas nos ayudan mucho, pero mucho con la gestión y validación de un formulario en React. Por un lado, la ruta de aprendizaje es bastante larga, pero con lo necesario puedes crear formulario bastante seguros y con Yup podremos personalizar las validaciones y optimizar los mensajes de error o ayuda al usuario.

Para este ejemplo me voy a saltar todo el proceso de crear un proyecto en react y voy a usar Bulma CSS para los estilos.

Crear formularios en React con Formik y YUP
Crear formulario en React con Formik y YUP

Formulario en react con Formik

Primero tenemos que instalar librerias yo utilizo npm y para instalar Formik copiamos lo siguiente en la consola:

npm install formik --save

Vamos por partes.
Primero creamos un nuevo componente, para este caso lo llamamos FormContact.js y lo escribimos lo siguiente.

import React from 'react'
export const FormContact = () => {
  return(<>Aqui va a ir el form</>)
}

Como ven, no hay nada del otro mundo, es solo React.

Antes de continuar con la creación de formulario en React , creamos un archivo aparte que va a contener los campos o «inputs» del formulario. A este component lo vamos a llamar InputsFields.js

Pero ya a este creamos component empezamos a usar algunas características de Formik

import React from 'react'
import { ErrorMessage, useField } from 'formik'

export const InputsField = ({label, ...props}) => {
  const [field, meta] = useField(props)

  return(
    <label className="label">{label}</label>
    <input
      className={`input ${meta.touched && meta.error && 'is-danger'}`}
      autoComplete="off"
      {...field}
      {...props}
      />
    <ErrorMessage
      component="div"
      name={field.name}
      className="help is-danger"
    />
  )
}
  • useField: usamos este Hook de formik
  • field: Tendremos todos los valores y datos que recibimos en las props
  • meta: Nos ayudará con las validaciones. En nuestro caso, lo usaremos para ver «pintar» nuestro formulario de color rojo en caso de estar vacío o los datos no sean correctos.
  • ErrorMessage: Se mostrará un mensaje de error en caso de que el campo del input no cumpla las validaciones.

    Nota: las classes de CSS son declaraciones de bulma CSS. pueden ser reemplazadas por las propias o algún otro framework css, ya sea Bootstrap o Tailwind

Comenzamos llamando formik y haciendo las primeras configuraciones.

import React from 'react'
import { Form, Formik } from 'formik'

export const FormContact = () => {
   return(
    <Formik
      initialValues={{
        name: '',
        email: '',
        phone: '',
      }}
      validationSchema={}
      onSubmit={(values, {resetForm}) => {
        console.log(values)
        resetForm()
      }
    >
     {formik => (
       <Form>
       </Form>     
     )}
    </Formik>
) }
  • initialValues: Definimos los campos de nuestros formularios, con datos vacíos.
  • validationSchema: Las reglas de validacion que definiremos mas adelante. Y que se mostraran dentro de los inputs que definimos dentro de InputsField.js
  • onSubmit: Las acciones que sucederán una vez que el usuario envíe el formulario
    • Values: Recoge los datos que se rellena los inputs y enviamos
    • resetForm(): Lo mejor de todo. Después de enviar el formulario se resetean los campos.

Llamamos los inputs del formulario. A los inputs les definimos los tipos, name, placeholders, entre otros.

import React from 'react'
import { Form, Formik } from 'formik'
import { InputsField } from './InputsField'
export const FormContact = () => {
   return(
    <Formik
      initialValues={{
        name: '',
        email: '',
        phone: '',
      }}
      validationSchema={}
      onSubmit={(values, {resetForm}) => {
        console.log(values)
        resetForm()
      }
    >
     {formik => (
       <Form>
        <InputsField label="Nombre y Apellido" name="name" type="text" placeholder="Add name" />
        <InputsField label="Correo electrónico" name="email" type="email" placeholder="Please add a email" />
        <InputsField label="Nombre y Apellido" name="phone" type="text" placeholder="Teléfono" />
        <button type="submit">Enviar mensaje</button>
       </Form>     
     )}
    </Formik>
) }

Todos los valores que llenamos dentro de los campos (name, type, placeholder y el label o etiqueta) los desestructuramos en InputsField.js «{label, …props}» todos los props lo declaramos dentro del useField(props)

Creamos validaciones con YUP

npm install yup

creamos una constante dentro de nuestro componente con el nombre validate

import React from 'react'
import { Form, Formik } from 'formik'
import * as Yup from 'yup'
import { InputsField } from './InputsField'

export const FormContact = () => {
  const validate = Yup.object({
    name: Yup.string().required('Su nombre es requerido'),
    email: Yup.string()
      .email('El correo no válido')
      .required('Su nombre es requerido'),
    phone: Yup.string()
      )
  })
   return(
    <Formik
      initialValues={{
        name: '',
        email: '',
        phone: '',
      }}
      validationSchema={validate}
      onSubmit={(values, {resetForm}) => {
        console.log(values)
        resetForm()
      }
    >
     {formik => (
       <Form>
        <InputsField label="Nombre y Apellido" name="name" type="text" placeholder="Add name" />
        <InputsField label="Correo electrónico" name="email" type="email" placeholder="Please add a email" />
        <InputsField label="Nombre y Apellido" name="phone" type="text" placeholder="Teléfono" />
        <button type="submit">Enviar mensaje</button>
       </Form>     
     )}
    </Formik>
) }

Agregamos «validate» dentro de «validationSchema» para todas las validaciones y mejorar la experiencia del usuario.


Con eso se termina este capítulo de cómo crear formulario en react con Formik y Yup, para un mejor manejo y experiencia del usuario a la hora de llenar un formulario.

Espero que le hay sido de ayuda y seguiré con mas tutoriales react

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *