Posted on Jan 21, 2022
How to Add Form Validation in React using React useRef() Hook ?
If you've worked on any react applications React Hook played a big role to Control Html elements and its properties. Hook Which played a big role for developing React Application are useState(),useEffect(),useRef() and More . In This post i will work on useState() Hook to Save input Data and useRef() for Form Validation. Now we Come on Our Topic.
How to Create a Form in React? it is Design Part only
<>
<div className='FormValBody'>
<div className='FormValInputLabelSp'><div className='labelSeprater'><label >Name<span className='FormErrorLabelSp'>*</span></label></div>
<input ref={(element) => formValidateRef.current[0] = element} type='text' name='Name' value={Name} onChange={(e) => { onInputChange(e) }} />
</div>
<div className='FormValInputLabelSp'><div className='labelSeprater'><label >Mobile No<span className='FormErrorLabelSp'>*</span></label></div>
<input ref={(element) => formValidateRef.current[1] = element} type='text' name='MobileNo' value={MobileNo} onChange={(e) => { onInputChange(e) }} /></div>
<div className='FormValInputLabelSp'><div className='labelSeprater'><label >Email Address<span className='FormErrorLabelSp'></span></label></div>
<input type='text' name='EmailAddress' value={EmailAddress} onChange={(e) => { onInputChange(e) }} /></div>
<div className='FormValInputLabelSp'><div className='labelSeprater'><label >Gender<span className='FormErrorLabelSp'>*</span></label></div>
<label> Male </label>
<input ref={(element) => formValidateRef.current[2] = element} type='radio' name='Gender' value='Male' onChange={(e) => { onInputChange(e) }} />
<label> Female </label>
<input ref={(element) => formValidateRef.current[3] = element} name='Gender' type='radio' value='Female' onChange={(e) => { onInputChange(e) }} /></div>
<div className='FormValInputLabelSp'>
<div className='labelSeprater'>
<label >Date of Birth<span className='FormErrorLabelSp'>*</span></label>
</div>
<input ref={(element) => formValidateRef.current[4] = element} type='date' name='DateOfBirth' value={DateOfBirth} onChange={(e) => { onInputChange(e) }} />
</div>
<div className='FormValInputLabelSp'><div className='labelSeprater'><label >Language<span className='FormErrorLabelSp'>*</span></label></div>
<label>Hindi</label>
<input ref={(element) => formValidateRef.current[5] = element} type='checkBox' name='Language' value='Hindi' onChange={(e) => { onInputChange(e) }} />
<label>Marathi</label>
<input ref={(element) => formValidateRef.current[6] = element} name='Language' type='checkBox' value='Marathi' onChange={(e) => { onInputChange(e) }} />
<label>English</label>
<input ref={(element) => formValidateRef.current[7] = element} name='Language' type='checkBox' value='English' onChange={(e) => { onInputChange(e) }} />
</div>
<div className='FormValInputLabelSp'><div className='labelSeprater'><label >Country<span className='FormErrorLabelSp'>*</span></label></div>
<label>India</label>
<input ref={(element) => formValidateRef.current[8] = element} type='checkBox' name='Country' value='India' onChange={(e) => { onInputChange(e) }} />
<label>Nepal</label>
<input ref={(element) => formValidateRef.current[9] = element} name='Country' type='checkBox' value='Nepal' onChange={(e) => { onInputChange(e) }} />
</div>
<div className='FormValInputLabelSp'><div className='labelSeprater'><label >State<span className='FormErrorLabelSp'>*</span></label></div>
<select ref={(element) => formValidateRef.current[10] = element} name='State' value={State} onChange={(e) => { onInputChange(e) }}>
<option value=''>---Select---</option>
{StateName.map((sName, index) => (
<option key={index + sName} value={sName}>{sName}</option>
))}
</select></div>
<button className='btnAdd' onClick={AddBtnFnt}>Add</button>
</div>
</>)Now We Create App.css file for Styling Our Form.
App.css
/*form Validation */
.FormValBody {
float: left;
padding: 10px 10px 10px 10px;
background-color: azure;
}
.FormValBody input {
padding: 5px 5px 5px 5px;
border-color: gainsboro;
outline-color: darkgrey;
font-family: 'Times New Roman';
font-size: 18px;
}
.FormValBody input:active{
outline-color:blue;
}
.FormValInputLabelSp {
width: 393px;
margin-top: 7px;
}
.labelSeprater {
width: 133px;
display: inline-block;
}
.FormErrorLabelSp {
font-family: 'Comic Sans MS';
font-size: 12px;
color: red;
}
.btnAdd {
margin-top:25px;
margin-bottom:15px;
margin-left: 38%;
border: none;
padding: 10px 20px 10px 20px;
background-color: ButtonFace;
}
.btnAdd:hover{
cursor:pointer;
}For Form Validation And Getting input Fields Value ,First We create Model related to our form. Model For Form
Model Object
const DetailsModel = {
Name: '',
MobileNo: '',
EmailAddress: '',
Gender: '',
DateOfBirth: '',
Language: [],
State: '',
Country:''
}Create Array of List For Our Drop-Down List.
Array List
const StateName = ['Assam', 'Bihar', 'Chhattisgarh', 'Jharkhand', 'Karnataka', 'Maharashtra', 'Uttar Pradesh'];
Next We use useState() Hook For Storing Input Data and useRef() HooK for Validate Our Form
useState() Hook
const [details, setDetails] = useState(DetailsModel);
const formValidateRef = useRef([]);
For Easily Access Value Of Our Object Model Key Value, we destructure our Model Object
Deestructuring Object
/* Deestructuring Object*/
const { Name, MobileNo, EmailAddress, Gender, DateOfBirth, Language, State } = details;
Now We Create a Arrow Function For Update Out Input Field Value State.
onInputChange() function
const onInputChange = (e) => {
const { name, value } = e.target;
if (e.target.type === 'checkbox') {
if (e.target.checked) {
setDetails((previous) => ({ ...previous, [name]: [...eval(name), value] }));
}
else {
const filterData = eval(name).filter((lang) => { return lang !== value });
setDetails((previous) => ({ ...previous, [name]: filterData }));
}
}
else {
setDetails((previous) => ({ ...previous, [name]: value }))
}
}After Storing This all Form Input fields data in state ,Now Time To validate Form. So We Create New Arrow Function for Validation.
ValidateData() function
const ValidateData = () => {
const validateArray = [];
const checkedList= [];
const unCheckedList= [];
for (let i = 0; i < formValidateRef.current.length; i++) {
if (!formValidateRef.current[i].value) {
validateArray.push({ ErrorMsg: formValidateRef.current[i].name + ' is required' });
}
else if (formValidateRef.current[i].value) {
if (formValidateRef.current[i].type === 'checkbox' || formValidateRef.current[i].type === 'radio') {
if (formValidateRef.current[i].checked) {
checkedList.push({ ErrorMsg: formValidateRef.current[i].name, IsStatus: formValidateRef.current[i].checked });
}
else {
unCheckedList.push({ ErrorMsg: formValidateRef.current[i].name, IsStatus: formValidateRef.current[i].checked });
}
}
}
}
const checkedDt = [...new Map(checkedList.map((obj) => [obj.ErrorMsg, obj])).values()];
const unCheckedDt = [...new Map(unCheckedList.map((obj) => [obj.ErrorMsg, obj])).values()];
const results = unCheckedDt.filter(({ ErrorMsg: unErrorMsg }) => !checkedDt.some(({ ErrorMsg: ckErrorMsg }) => ckErrorMsg === unErrorMsg));
if (checkedDt.length === 0 && unCheckedDt.length > 0) {
unCheckedDt.map((data) => {
validateArray.push({ ErrorMsg: data.ErrorMsg + ' is required' });
})
}
else if (checkedDt.length > 0 && unCheckedDt.length > 0) {
results.map((data) => {
validateArray.push({ ErrorMsg: data.ErrorMsg + ' is required' });
})
}
return validateArray;
}
So Finally We Call This Validation Function On Add Button and And after Validation Of Form ,we Show Data in alert() .
AddBtnFnt
const AddBtnFnt = () => {
const isValied = ValidateData();
if (isValied.length > 0) {
alert(JSON.stringify(isValied))
}
else {
alert('SuccessFully Added')
}
}Now Finally We Validate Our Form. Final All Code are Below
App.js
import React, { useState } from 'react';
import './App.css';
import React, { useRef, useState } from 'react';
const StateName = ['Assam', 'Bihar', 'Chhattisgarh', 'Jharkhand', 'Karnataka', 'Maharashtra', 'Uttar Pradesh'];
const DetailsModel = {
Name: '',
MobileNo: '',
EmailAddress: '',
Gender: '',
DateOfBirth: '',
Language: [],
State: '',
Country:''
}
const App = () => {
const [details, setDetails] = useState(DetailsModel);
const formValidateRef = useRef([]);
/* Deestructuring Object*/
const { Name, MobileNo, EmailAddress, Gender, DateOfBirth, Language, State, Country } = details;
const onInputChange = (e) => {
const { name, value } = e.target;
if (e.target.type === 'checkbox') {
if (e.target.checked) {
setDetails((previous) => ({ ...previous, [name]: [...eval(name), value] }));
}
else {
const filterData = eval(name).filter((lang) => { return lang !== value });
setDetails((previous) => ({ ...previous, [name]: filterData }));
}
}
else {
setDetails((previous) => ({ ...previous, [name]: value }))
}
}
const ValidateData = () => {
const validateArray = [];
const checkedList= [];
const unCheckedList= [];
for (let i = 0; i < formValidateRef.current.length; i++) {
if (!formValidateRef.current[i].value) {
validateArray.push({ ErrorMsg: formValidateRef.current[i].name + ' is required' });
}
else if (formValidateRef.current[i].value) {
if (formValidateRef.current[i].type === 'checkbox' || formValidateRef.current[i].type === 'radio') {
if (formValidateRef.current[i].checked) {
checkedList.push({ ErrorMsg: formValidateRef.current[i].name, IsStatus: formValidateRef.current[i].checked });
}
else {
unCheckedList.push({ ErrorMsg: formValidateRef.current[i].name, IsStatus: formValidateRef.current[i].checked });
}
}
}
}
const checkedDt = [...new Map(checkedList.map((obj) => [obj.ErrorMsg, obj])).values()];
const unCheckedDt = [...new Map(unCheckedList.map((obj) => [obj.ErrorMsg, obj])).values()];
const results = unCheckedDt.filter(({ ErrorMsg: unErrorMsg }) => !checkedDt.some(({ ErrorMsg: ckErrorMsg }) => ckErrorMsg === unErrorMsg));
if (checkedDt.length === 0 && unCheckedDt.length > 0) {
unCheckedDt.map((data) => {
validateArray.push({ ErrorMsg: data.ErrorMsg + ' is required' });
})
}
else if (checkedDt.length > 0 && unCheckedDt.length > 0) {
results.map((data) => {
validateArray.push({ ErrorMsg: data.ErrorMsg + ' is required' });
})
}
return validateArray;
}
const AddBtnFnt = () => {
const isValied = ValidateData();
if (isValied.length > 0) {
alert(JSON.stringify(isValied))
}
else {
alert('SuccessFully Added')
}
}
return (
<>
<div className='FormValBody'>
<div className='FormValInputLabelSp'><div className='labelSeprater'><label >Name<span className='FormErrorLabelSp'>*</span></label></div>
<input ref={(element) => formValidateRef.current[0] = element} type='text' name='Name' value={Name} onChange={(e) => { onInputChange(e) }} />
</div>
<div className='FormValInputLabelSp'><div className='labelSeprater'><label >Mobile No<span className='FormErrorLabelSp'>*</span></label></div>
<input ref={(element) => formValidateRef.current[1] = element} type='text' name='MobileNo' value={MobileNo} onChange={(e) => { onInputChange(e) }} /></div>
<div className='FormValInputLabelSp'><div className='labelSeprater'><label >Email Address<span className='FormErrorLabelSp'></span></label></div>
<input type='text' name='EmailAddress' value={EmailAddress} onChange={(e) => { onInputChange(e) }} /></div>
<div className='FormValInputLabelSp'><div className='labelSeprater'><label >Gender<span className='FormErrorLabelSp'>*</span></label></div>
<label> Male </label>
<input ref={(element) => formValidateRef.current[2] = element} type='radio' name='Gender' value='Male' onChange={(e) => { onInputChange(e) }} />
<label> Female </label>
<input ref={(element) => formValidateRef.current[3] = element} name='Gender' type='radio' value='Female' onChange={(e) => { onInputChange(e) }} /></div>
<div className='FormValInputLabelSp'>
<div className='labelSeprater'>
<label >Date of Birth<span className='FormErrorLabelSp'>*</span></label>
</div>
<input ref={(element) => formValidateRef.current[4] = element} type='date' name='DateOfBirth' value={DateOfBirth} onChange={(e) => { onInputChange(e) }} />
</div>
<div className='FormValInputLabelSp'><div className='labelSeprater'><label >Language<span className='FormErrorLabelSp'>*</span></label></div>
<label>Hindi</label>
<input ref={(element) => formValidateRef.current[5] = element} type='checkBox' name='Language' value='Hindi' onChange={(e) => { onInputChange(e) }} />
<label>Marathi</label>
<input ref={(element) => formValidateRef.current[6] = element} name='Language' type='checkBox' value='Marathi' onChange={(e) => { onInputChange(e) }} />
<label>English</label>
<input ref={(element) => formValidateRef.current[7] = element} name='Language' type='checkBox' value='English' onChange={(e) => { onInputChange(e) }} />
</div>
<div className='FormValInputLabelSp'><div className='labelSeprater'><label >Country<span className='FormErrorLabelSp'>*</span></label></div>
<label>India</label>
<input ref={(element) => formValidateRef.current[8] = element} type='checkBox' name='Country' value='India' onChange={(e) => { onInputChange(e) }} />
<label>Nepal</label>
<input ref={(element) => formValidateRef.current[9] = element} name='Country' type='checkBox' value='Nepal' onChange={(e) => { onInputChange(e) }} />
</div>
<div className='FormValInputLabelSp'><div className='labelSeprater'><label >State<span className='FormErrorLabelSp'>*</span></label></div>
<select ref={(element) => formValidateRef.current[10] = element} name='State' value={State} onChange={(e) => { onInputChange(e) }}>
<option value=''>---Select---</option>
{StateName.map((sName, index) => (
<option key={index + sName} value={sName}>{sName}</option>
))}
</select></div>
<button className='btnAdd' onClick={AddBtnFnt}>Add</button>
</div>
</>)
};
export default App;Well done! Finally Validate Our For And Make A Awesome GUI ! Drop some love by liking or commenting ♥
Reference w3schools
Add a comment
0 COMMENTS:
Read Our Latest Technical Articles
Sep 16, 2023*
How mange Global State Management In React With the Help of useContext() Hook and time to say bye-bye Redux ?
Oct 26, 2022*
How to Add Form Validation in React using React Hook ?How to Save CheckBox,Radio Button,Input Field( Text&Date Type),And Select drop-down list Value in React?
Oct 16, 2022*
How To Customize HTML video Tag controls attribute in React js using useRef() and useState() Hook ?
Oct 08, 2022*
How to handle multiple Same inputs box in React for Bulk Data Insert With Use of useRef Hook?
Contact and tell us what you needed
ABOUT US
BihariSoft