Validating user input is an essential part of building robust and secure web applications. JOI is a powerful validation library that helps you define and enforce validation rules for your data. In this article, we will explore how to implement the JOI module in ReactJS to validate and handle user input effectively.
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 the 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 |
| 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
Javascript
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
Javascript
import React from "react";import CustomerForm from "./CustomerForm";function ValidationJoiHome() { return ( <div> neveropen: Validation Joi Home <CustomerForm /> </div> );}export default ValidationJoiHome; |
Step 6: Add ValidationJoiHome component in App.js
Javascript
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:
