Form Validation in Reactjs

This is a step-by-step tutorial that will show you how to do basic form validation in ReactJS.Form Validation in Reactjs .

We will not use any package for form validation. But if you want then you can download using npm or yarn .Form validation in ReactJS is very easy like other programming languages such PHP and .NET.

Learn our More Tutorial on ReactJS

How to create barcodes in ReactJS

ReactJs Food Recipe Web App

React CRUD Example with CodeIgniter

I have used bootstrap so you can install bootstrap using npm or yarn like npm install bootstrap or yarn add bootstrap. I have used useState() for handling form data.

Now Create a file inside src folder of ReactJS named FormValidation . We will just use only one file for validation.

FormValidation.js

import 'bootstrap/dist/css/bootstrap.min.css';
import react from 'react';
import {useState} from 'react';



function FormValidation()
{
    const[firstName,setFirstName] = useState('');
    const[lastName,setLastName] = useState("");
    const[email,setEmail] = useState('');
    const[password,setPassword] = useState("");


    const[firstNameErr,setFirstNameErr] = useState('');
    const[lastNameErr,setLastNameErr] = useState("");
    const[emailErr,setEmailErr] = useState('');
    const[passwordErr,setPasswordErr] = useState("");


    const onSubmit = (e) =>
    {
       e.preventDefault();
       const isValid = formValidation();
    }

    const formValidation = () =>
    {
       const firstNameErr = {};
       const lastNameErr = {};
       const emailErr = {};
       const passwordErr = {};

       let isValid = true;
       
       if(firstName.trim().length<5)
       {
           firstNameErr.firstNameShort = "First Name is too short";
           isValid = false;
       }
       else if(firstName.trim().length>10)
       {
           firstNameErr.firstNameLong = "Last Name is too long";
           isValid = false;
       }
       if(!email.includes("gmail.com"))
       {
           emailErr.email = "Not a valid Email";
           isValid = false;
       }
       if(!password.includes("1234"))
       {
           passwordErr.password = "Password must contain 1234";
           isValid = false;
       }

       setFirstNameErr(firstNameErr);
       setLastNameErr(lastNameErr);

       setEmailErr(emailErr);
       setPasswordErr(passwordErr);

       return isValid;

    }

 return(
    <div className = "container mt-5">
        <h4>Form Validation in ReactJS</h4>
       <div className="row mt-3 p-2" >
           <div className="col-sm-4 offset-sm-4 p-5" style={{ border:"1px solid #000000"}}>
           <form onSubmit={onSubmit}>
               <div class="form-group">
                    <input type="text" value={firstName} onChange={(e)=>{setFirstName(e.target.value)}} class="form-control mb-2"   placeholder="Enter First Name"/>
                    {Object.keys(firstNameErr).map((key)=>{
                    return <h6 style={{color:"red"}}>{firstNameErr[key]}</h6>
                   })}
                </div>
            
                <div class="form-group">
                    <input type="text" value={lastName}  onChange={(e)=>{setLastName(e.target.value)}} class="form-control mb-2"   placeholder="Enter Last Name"/>
                    {Object.keys(lastNameErr).map((key)=>{
                      return <h6  style={{color:"red"}}>{lastNameErr[key]}</h6>
                    })}
                </div>

                <div class="form-group">
                    <input type="text" value={email}  onChange={(e)=>{setEmail(e.target.value)}} class="form-control mb-2"    placeholder="Enter Email"/>
                    {Object.keys(emailErr).map((key)=>{
                      return <h6 style={{color:"red"}}>{emailErr[key]}</h6>
                    })}
                </div>

                <div class="form-group">
                    <input type="text" value={password}  onChange={(e)=>{setPassword(e.target.value)}} class="form-control mb-2"   placeholder="Enter Password"/>
                    {Object.keys(passwordErr).map((key)=>{
                      return <h6 style={{color:"red"}}>{passwordErr[key]}</h6>
                    })}
                </div>

                <button type="submit" class="btn btn-success btn-block">Submit</button>
              </form> 
           </div>    
       </div>     
    </div>
 )
}
export default FormValidation;

Now We will call this file inside our App.js file

App.js

import './App.css';
import FormValidation from './FormValidation';

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

export default App;

Now run this code in browser http://localhost:3000/ You can use any other port by writing THIS LINE of CODE in Package.json file “start”: “set PORT=3006 && react-scripts start”

Leave a Reply

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