Validación de formularios ReactJS usando Formik y Yup

Como se mencionó en el artículo anterior , podemos validar formularios utilizando componentes controlados. Pero puede llevar mucho tiempo y la longitud del código puede aumentar si necesitamos formularios en muchos lugares de nuestro sitio web. ¡Aquí viene Formik y Yup al rescate! Formik está diseñado para administrar formularios con validación compleja con facilidad. Formik admite la validación sincrónica y asincrónica a nivel de formulario y de nivel de campo. Además, viene con soporte incorporado para la validación de nivel de formulario basada en esquemas a través de Yup. También usaríamos bootstrap para no perder el tiempo con HTML y CSS.

A continuación se muestra la implementación paso a paso sobre cómo validar formularios usando Formik y Yup.

Paso 1: Creación de la aplicación React e instalación del módulo:

npx create-react-app react-form

Paso 2: después de crear la carpeta de su proyecto iereact-form , acceda a ella con el siguiente comando:

cd react-form

Paso 3: luego agregue bootstrap (esto es opcional si lo desea, puede crear su propio estilo).

yarn add bootstrap

Paso 4: Podemos proceder a agregar Formik y Yup.

yarn add formik yup

Estructura del proyecto : Se verá como lo siguiente.

estructura del proyecto

Nota: Escribiremos el código completo en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código. 

Paso 5: <Formik> es un componente que lo ayuda a crear formularios. InitialValues ​​es un accesorio que inicializa todos los campos en su formulario. Generalmente, la inicialización es una string vacía, pero en algunos campos puede requerir un valor inicial.

<Formik
      initialValues={{
        email: "",
        password: ""
      }}
>

Paso 6:  estamos agregando un bloque de código en el que estamos pasando accesorios proporcionados por Formik y estamos imprimiendo el objeto de accesorios en la consola. Luego usamos el componente <Form> proporcionado por Bootstrap en el que nuevamente pasamos 2 componentes, a saber, <label> y <Field> Component. Por último, usamos el componente Bootstrap <Button> para enviar el formulario. Código básico de caldera del componente de formulario que debe envolverse dentro de formik.

import React from "react";
import { Formik, Form, Field } from "formik";
  
import "bootstrap/dist/css/bootstrap.css";
  
class App extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-lg-12">
            <Formik initialValues={{ email: "", password: "" }}>
              {(props) => (
                <div>
                  {console.log(props)}
                  <div className="row mb-5">
                    <div className="col-lg-12 text-center">
                      <h1 className="mt-5">Login Form</h1>
                    </div>
                  </div>
                  <Form>
                    <div className="form-group">
                      <label htmlFor="email">Email</label>
                      <Field
                        type="email"
                        name="email"
                        placeholder="Enter email"
                        autoComplete="off"
                      />
                    </div>
  
                    <div className="form-group">
                      <label htmlFor="password" className="mt-3">
                        Password
                      </label>
                      <Field
                        type="password"
                        name="password"
                        placeholder="Enter password"
                      />
                    </div>
  
                    <button
                      type="submit"
                      className="btn btn-primary btn-block mt-4"
                    >
                      Submit
                    </button>
                  </Form>
                </div>
              )}
            </Formik>
          </div>
        </div>
      </div>
    );
  }
}
  
export default App;

Paso 7:  como se discutió, agregamos una función que toma un argumento (digamos accesorios) y hemos envuelto nuestro formulario dentro del componente formik y luego hemos impreso el argumento de accesorios para que podamos ver varios accesorios proporcionados por formik. En la consola, se muestra un objeto. Si miramos de cerca, podemos ver que los valores iniciales también se muestran en este objeto.

Paso 8: Otro accesorio para Formik es onSubmit , que toma valores como parámetro y se usa principalmente para llamadas posteriores a la API para recopilar los datos del formulario y luego podemos almacenar los datos en el servidor. Pero en nuestro caso, lo mantendríamos simple y solo imprimiríamos los valores en la consola y enviaríamos un mensaje de alerta. 

<Formik
    initialValues={{ email: "", password: "" }}
    onSubmit={(values) => {
      console.log(values)
      alert("Form is validated and in this 
        block api call should be made...");
      }
    }
>

Paso 9:  Además, aquí podemos tener la propiedad ValidationSchema que toma el objeto Yup (en este caso LoginSchema ) como un parámetro con validaciones personalizadas, como si queremos que nuestro campo sea:

1. String: Sí. string()
2. Formatear como correo electrónico (mensaje de validación): Yup.email («Formato de dirección de correo electrónico no válido»)
3. Caracteres mínimos: Yup.min(longitud, “Mensaje de validación”)
4. Caracteres máximos: Yup.max (longitud, «Mensaje de validación»)

const LoginSchema = Yup.object().shape({
  email: Yup.string()
  
    // Format Validation
    .email("Invalid email address format")
  
    // Required Field Validation
    .required("Email is required"),
  password: Yup.string()
  
    //Minimum Character Validation
    .min(3, "Password must be 3 characters at minimum")
    .required("Password is required")
});

Paso 10:  el componente Formik después de incluir 3 accesorios, a saber, initialValues, ValidationSchema (para vincular Formik y Yup), onSubmit se ve así: 

<Formik
    initialValues={{ email: "", password: "" }}
    validationSchema={LoginSchema}
    onSubmit={(values) => {
    console.log(values)
    alert("Form is validated! Submitting the form...");
}}
>

Los 4 estados importantes del objeto props son touch , errores , isSubmitting , valores que son más que suficientes para crear formularios altamente personalizados.

1. tocado toma valores booleanos como entrada y se establece en verdadero si se hace clic en un campo.
2. errores se utiliza para mostrar mensajes de error establecidos por el objeto Yup.
3. isSubmitting se establece en verdadero después de hacer clic en enviar formulario.
4. los valores constan de todos los valores de campo en ese momento.

Paso 11: ahora viene el componente ErrorMessage que generalmente usamos debajo del componente de campo para mostrar la validación generada por Yup. Podemos agregar comentarios no válidos de la clase bootstrap para el estilo.

<label htmlFor="email">Email</label>
  
<Field
  type="email"
  name="email"
  placeholder="Enter email"
  autocomplete="off"
  className={`mt-2 form-control ${touched.email 
        && errors.email ? "is-invalid" : ""}`} 
  // If there is validation error then 
  // is-invalid bootstrap class is added
/>
  
<ErrorMessage
  component="div"
  name="email"
  className="invalid-feedback"
/>

Paso 12:  Todavía no hemos usado isSubmitting prop en la función. Podemos hacer una cosa interesante usándolo. Podemos reconocer al usuario que ha iniciado sesión y mostrar su nombre de usuario y contraseña usando el parámetro de valores en la pantalla usando representación condicional y operador ternario.

isSubmitting ? (<h1>Login Page</h1>) : (<h1>Confirmation of Login</h1>)
// (condition) ? (if true this component gets displayed) :
                 (else this component gets displayed)

Ahora veremos el código completo de los pasos anteriores.

import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";
import "bootstrap/dist/css/bootstrap.css";
  
const LoginSchema = Yup.object().shape({
  email: Yup.string()
    .email("Invalid email address format")
    .required("Email is required"),
  password: Yup.string()
    .min(3, "Password must be 3 characters at minimum")
    .required("Password is required"),
});
  
class App extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-lg-12">
            <Formik
              initialValues={{ email: "", password: "" }}
              validationSchema={LoginSchema}
              onSubmit={(values) => {
                console.log(values);
                alert("Form is validated! Submitting the form...");
              }}
            >
              {({ touched, errors, isSubmitting, values }) =>
                !isSubmitting ? (
                  <div>
                    <div className="row mb-5">
                      <div className="col-lg-12 text-center">
                        <h1 className="mt-5">Login Form</h1>
                      </div>
                    </div>
                    <Form>
                      <div className="form-group">
                        <label htmlFor="email">Email</label>
                        <Field
                          type="email"
                          name="email"
                          placeholder="Enter email"
                          autocomplete="off"
                          className={`mt-2 form-control
                          ${touched.email && errors.email ? "is-invalid" : ""}`}
                        />
  
                        <ErrorMessage
                          component="div"
                          name="email"
                          className="invalid-feedback"
                        />
                      </div>
  
                      <div className="form-group">
                        <label htmlFor="password" className="mt-3">
                          Password
                        </label>
                        <Field
                          type="password"
                          name="password"
                          placeholder="Enter password"
                          className={`mt-2 form-control
                          ${
                            touched.password && errors.password
                              ? "is-invalid"
                              : ""
                          }`}
                        />
                        <ErrorMessage
                          component="div"
                          name="password"
                          className="invalid-feedback"
                        />
                      </div>
  
                      <button
                        type="submit"
                        className="btn btn-primary btn-block mt-4"
                      >
                        Submit
                      </button>
                    </Form>
                  </div>
                ) : (
                  <div>
                    <h1 className="p-3 mt-5">Form Submitted</h1>
  
                    <div className="alert alert-success mt-3">
                      Thank for your connecting with us. Here's what we got from
                      you !
                    </div>
                    <ul className="list-group">
                      <li className="list-group-item">Email: {values.email}</li>
                      <li className="list-group-item">
                        Password: {values.password}
                      </li>
                    </ul>
                  </div>
                )
              }
            </Formik>
          </div>
        </div>
      </div>
    );
  }
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida: