Step 1 Create a state for Error message
const [form_message, setform_message]=useState('')
Step 2 Add a place in a form to display Error message of form elements
<div class="form_message">{form_message}</div>
Step 3 Add a code to validate in handleSubmit function
const handleSubmit = (e)=>{
e.preventDefault()
console.log(firstname,lastname)
if(firstname ==""){
setform_message("Enter your first name")
}else if(lastname ==""){
setform_message("Enter your Last name")
}else if(mobileno ==""){
setform_message("Enter your Mobile no")
}else if(email ==""){
setform_message("Enter your Email id")
}else if(password ==""){
setform_message("Enter your Passsword")
}
}
Step 4 Final code for registration.jsx
import { useEffect, useState } from 'react'
import '../css/registration.css'
import { useLocation, useNavigate } from 'react-router-dom';
const Registration = ()=>{
const [firstname, setfirstname] = useState('');
const [lastname, setlastname] = useState('');
const [mobileno, setmobileno] = useState('');
const [email, setemail] = useState('');
const [password, setpassword] = useState('');
const [form_title, setform_title] = useState('')
const [button_name, setbutton_name]= useState('')
const [form_link,setform_link] = useState('')
const [naviage_link, setnaviage_link]= useState('')
const [form_message, setform_message]=useState('')
const location = useLocation();
const navigate = useNavigate();
useEffect(()=>{
if(location.pathname.split('/')[1] == 'login'){
setform_title('Login form')
setbutton_name('Login')
setform_link('New User')
setnaviage_link('registration')
}
if(location.pathname.split('/')[1] == 'registration'){
setform_title('Registration form')
setbutton_name('Registration')
setform_link('Already an user')
setnaviage_link('login')
}
},[])
const handleFirstname = (e)=>{
setfirstname(e.target.value)
}
const handleLastname = (e)=>{
setlastname(e.target.value)
}
const handleMobileno = (e)=>{
setmobileno(e.target.value)
}
const handleEmail = (e)=>{
setemail(e.target.value)
}
const handlePassword = (e)=>{
setpassword(e.target.value)
}
const handleSubmit = (e)=>{
e.preventDefault()
console.log(firstname,lastname)
if(firstname ==""){
setform_message("Enter your first name")
}else if(lastname ==""){
setform_message("Enter your Last name")
}else if(mobileno ==""){
setform_message("Enter your Mobile no")
}else if(email ==""){
setform_message("Enter your Email id")
}else if(password ==""){
setform_message("Enter your Passsword")
}
}
return(
<>
<div id="form-top-container">
<div id="form-container">
<div class="header-form">{form_title} </div>
<div class="form_message">{form_message}</div>
<form class="form">
{button_name == 'Registration'&&
<>
<div class="input-box">
<label for="firstname">First name </label>
<input type="text" placeholder="First name" value={firstname} onChange={handleFirstname}/>
</div>
<div class="input-box">
<label for="lastname">Last name </label>
<input type="text" placeholder="Last name" value={lastname} onChange={handleLastname}/>
</div>
<div class="input-box">
<label for="mobileno">Mobile no </label>
<input type="text" placeholder="Mobile no" value={mobileno} onChange={handleMobileno}/>
</div>
</>
}
<div class="input-box">
<label for="email">Email </label>
<input type="text" placeholder="Email" value={email} onChange={handleEmail}/>
</div>
<div class="input-box">
<label for="password">Password</label>
<input type="text" placeholder="Password" value={password} onChange={handlePassword}/>
</div>
<input type="submit" value={button_name} onClick={handleSubmit}/>
</form>
{form_link} <a class="naviage_link" onClick={()=>{navigate(`/${naviage_link}`)}}>Click here</a>
</div>
</div>
</>
)
}
export default Registration
