Implementando el Módulo JOI en ReactJS

El módulo Joi es un módulo popular para la validación de datos. Este módulo valida los datos basados ​​en esquemas. Hay varias funciones como opcional(), requerida(), min(), max(), etc. que lo hacen fácil de usar y un módulo fácil de usar para validar los datos.

Ventajas de usar JOI sobre las validaciones de Javascript: 

• Es fácil de empezar y fácil de usar.
• Es un módulo ampliamente utilizado y popular para la validación de datos.
• Es compatible con la validación basada en esquemas.

Paso 1: Cree la aplicación de reacción usando el siguiente comando.

npx create-react-app my-first-app

Paso 2: cambie el directorio a esa carpeta ejecutando el comando:

cd my-first-app

Paso 3: Instala las dependencias necesarias. Vaya al directorio ‘src’ y ejecute el símbolo del sistema allí y ejecute el comando

npm install joi

Estructura del archivo: Se verá como lo siguiente. 

Paso 4:   Ahora crearemos un formulario para un cliente y le agregaremos validaciones. El formulario de cliente contendrá campos como:

En el siguiente archivo, crearemos un formulario que contenga varios campos como nombre, apellido, pin, fecha de nacimiento y correo electrónico. Luego cree un esquema y luego defina las validaciones de Joi. Si se detecta algún error, se crean varios div para mostrar el error.

import React, { useState } from "react";
import Joi from "joi-browser";
import { toast } from "react-toastify";
function CustomerForm(props) {
  const [customer, setCustomer] = useState({
    firstName: "",
    lastName: "",
    email: "",
    pin: 0,
    birthdate: "",
  });
  
  const [errors, setErrors] = useState({});
  const schema = {
    firstName: Joi.string().min(1).max(20).required(),
    lastName: Joi.string().required(),
    email: Joi.string().email().required(),
    pin: Joi.number().min(1000).max(9999).required(),
    birthdate: Joi.date().min("2001-01-01").required(),
  };
  
  const validateForm = (event) => {
    event.preventDefault();
    const result = Joi.validate(customer, 
        schema, { abortEarly: false });
    console.log(result);
    const { error } = result;
    if (!error) {
      return null;
    } else {
      const errorData = {};
      for (let item of error.details) {
        const name = item.path[0];
        const message = item.message;
        errorData[name] = message;
      }
      console.log(errors);
      setErrors(errorData);
      return errorData;
    }
  };
  
  const handleSave = (event) => {
    const { name, value } = event.target;
    let errorData = { ...errors };
    const errorMessage = validateProperty(event);
    if (errorMessage) {
      errorData[name] = errorMessage;
    } else {
      delete errorData[name];
    }
    let customerData = { ...customer };
    customerData[name] = value;
    setCustomer(customerData);
    setErrors(errorData);
  };
  
  const validateProperty = (event) => {
    const { name, value } = event.target;
    const obj = { [name]: value };
    const subSchema = { [name]: schema[name] };
    const result = Joi.validate(obj, subSchema);
    const { error } = result;
    return error ? error.details[0].message : null;
  };
  const clearState = () => {
    setCustomer({
      firstName: "",
      lastName: "",
      email: "",
      pin: 0,
      birthdate: "",
    });
  };
  return (
    <div>
      <h3>Add Customer</h3>
      <hr />
      <form className="ui form">
        <div className="form-group">
          <label>First Name</label>
          <input
            type="text"
            name="firstName"
            className="form-control"
            value={customer.firstName}
            onChange={handleSave}
          />
        </div>
        {errors.firstName && (
          <div className="alert alert-danger">
            {errors.firstName}
          </div>
        )}
        <div className="form-group">
          <label>Last Name</label>
          <input
            type="text"
            name="lastName"
            className="form-control"
            value={customer.lastName}
            onChange={handleSave}
          />
        </div>
        {errors.lastName && (
          <div className="alert alert-danger">
            {errors.lastName}
          </div>
        )}
        <div className="form-group">
          <label>Email</label>
          <input
            type="email"
            name="email"
            className="form-control"
            value={customer.email}
            onChange={handleSave}
          />
        </div>
        {errors.email && (
          <div className="alert alert-danger">
            {errors.email}
          </div>
        )}
        <div className="form-group">
          <label>PIN</label>
          <input
            type="number"
            name="pin"
            className="form-control"
            value={customer.pin}
            onChange={handleSave}
          />
        </div>
        <div className="form-group">
          <label>Date of Birth</label>
          <input
            type="date"
            name="dob"
            className="form-control"
            value={customer.dob}
            onChange={handleSave}
          />
        </div>
        {errors.birthdate && (
          <div className="alert alert-danger">
            {errors.birthdate}
          </div>
        )}
        <div className="btn">
          <button
            type="submit"
            onClick={validateForm}
            className="btn btn-success"
          >
            Add customer
          </button>
        </div>
      </form>
    </div>
  );
}
  
export default CustomerForm;

Paso 5: Cree el componente ValidationJoiHome e importe CustomerForm aquí. En este componente, simplemente se importa CustomerForm .

import React from "react";
import CustomerForm from "./CustomerForm";
function ValidationJoiHome() {
  return (
    <div>
      GeeksforGeeks: Validation Joi Home
      <CustomerForm />
    </div>
  );
}
export default ValidationJoiHome;

Paso 6:  agregue el componente ValidationJoiHome en App.js

import ValidationJoiHome from 
    "./ValidationJoi/ValidationJoiHome";
      
function App() {
  return (
    <div className="App">
      <ValidationJoiHome />
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Producción: