Implementing JOI Module in ReactJS

Joi module is a popular module for data validation. This module validates the data based on schemas. There are various functions like optional(), required(), min(), max(), etc which make it easy to use and a user-friendly module for validating the data.

Advantages of Using JOI over Javascript validations:

• It’s easy to get started and easy to use.
• It is widely used and popular module for data validation.
• It supports schema based validation.

Step 1: Create react app using the following command.

npx create-react-app my-first-app

Step 2: Change directory to that folder by executing command :

cd my-first-app

Step 3: Install the necessary dependencies. Go to the directory ‘src’ and execute command prompt there and run command

npm install joi

File Structure: It will look like the following. 

Step 4:  Now we will create a form for a customer and add validations to it. Customer Form will contain fields like:

Field Name	Validations
First Name	minimum length=1 maximum length=2 required
Last Name	required
Email	required
PIN Code	in range 1000-9999
Date of Birth	Born after ‘2001-01-01’

In the below file, we will create a form containing various fields like firstName, lastName, Pin, Date of Birth, and email. Then create a schema then defined Joi validations. If any error is caught, then various div are created to display error.

CustomerForm.jsx

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;

Step 5: Create ValidationJoiHome component and import CustomerForm here.  In this component, simply CustomerForm is imported.

ValidationJoiHome.jsx

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

Step 6: Add ValidationJoiHome component in App.js

Name:App.js

import ValidationJoiHome from
    "./ValidationJoi/ValidationJoiHome";

function App() {
  return (
    <div className="App">
      <ValidationJoiHome />
    </div>
  );
}

export default App;

Step to run the application: Open the terminal and type the following command.

npm start

Output: