Form Validation in ReactJs

We all know how Validation is very important in our Website . In this article, We will understand how to Validate Forms in React.Form Validation in ReactJs

We can use any form validation package or we can use our custom code for the FROM Validation in ReactJs. Yup validation very good form validation package in ReactJs

Below is sample code for a Validation form .

import React from 'react';
import ReactDOM from 'react-dom';
import {useFormik} from 'formik';

const validateEmployee = empData => {
  const errors = {};

  if (!empData.Name) {
    errors.Name = 'Please Enter Employee Name';
  } else if (empData.Name.length > 20) {
    errors.Name = 'Name cannot exceed 20 characters';
  }

  if (!empData.Location) {
    errors.Location = 'Please Enter Employee Location';
  } 

  if (!empData.EmailId) {
    errors.EmailId = 'Please Enter Email ID';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(empData.EmailId)) {
    errors.EmailId = 'Invalid email address';
  }

  return errors;
};
const EmployeeComponent=()=>{
  const formik=useFormik({
    initialValues:{
      Id:'',
      Name:'',
      Location:'',
      Salary:'',
      EmailId:''
    },
    validate:validateEmployee,
    onSubmit:values=>{
      alert(JSON.stringify(values));
    }
  });

  return (
    <div>
      <h2>New Employee Form...</h2>
      
  <form onSubmit={formik.handleSubmit}>
        <p>
          <label htmlFor="Id">Employee ID : </label>
          <input type="text" name="Id" id="Id" value={formik.values.Id}
                  onChange={formik.handleChange}></input>  
        </p>
        <p>
           <label htmlFor="Name">Employee Name : </label>
           <input type="text" name="Name" id="Name" value={formik.values.Name}
                  onChange={formik.handleChange} onBlur={formik.handleBlur}></input>
                  {formik.touched.Name && formik.errors.Name ? <span style={{color:'red'}}>{formik.errors.Name}</span> : null}
                  
         </p>
         <p>
           <label htmlFor="Location">Employee Location : </label>
           <input type="text" name="Location" id="Location" value={formik.values.Location}
                  onChange={formik.handleChange} onBlur={formik.handleBlur}></input>
                  {formik.touched.Location && formik.errors.Location ? <span style={{color:'red'}}>{formik.errors.Location}</span> : null}
                 
         </p>
         <p>
           <label htmlFor="Salary">Employee Salary : </label>
           <input type="text" name="Salary" id="Salary" value={formik.values.Salary}
                  onChange={formik.handleChange}></input>                  
         </p>
         <p>
           <label htmlFor="EmailId">Employee Email ID : </label>
           <input type="text" name="EmailId" id="EmailId" value={formik.values.EmailId}
                  onChange={formik.handleChange} onBlur={formik.handleBlur}></input>
                  {formik.touched.EmailId && formik.errors.EmailId ? <span style={{color:'red'}}>{formik.errors.EmailId}</span> : null}
                 
         </p>
         <button type="submit">Create</button>
  </form>
    </div> 
  )
}

const element=<EmployeeComponent></EmployeeComponent>

ReactDOM.render(element,document.getElementById("root"));

But We can use third party library for validation in our react form such as

So as we have seen five ReactJS packages for a form validation

Leave a Reply

Your email address will not be published. Required fields are marked *