Implementing JOI Module in ReactJS

21 Sep, 2021
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:
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:
Blogathon-2021
React-Questions
Blogathon
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Import JSON Data into SQL Server?
SQL Query to Convert Datetime to Date
Python program to convert XML to Dictionary
Scrape LinkedIn Using Selenium And Beautiful Soup in Python
How to toggle password visibility in forms using Bootstrap-icons ?
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
Axios in React: A Guide for Beginners
ReactJS Functional Components