How to create
import React from ‘react’;
import { Container } from ‘react-bootstrap’;
import { useState } from ‘react’;
export default function NewFormValidation() {
const [newformData, setnewFormData] = useState({
firstName: ”,
lastName: ”,
userName: ”,
email: ”
})
const [formError, setFormError] = useState({})
const onChangeHandler = (event) => {
console.log(event)
setnewFormData(() => ({
…newformData, [event.target.name]: event.target.value
}))
}
const FormValidation = () => {
let err = {}
if (newformData.firstName === ”) {
err.firstName = ‘First Name Required’
}
if (newformData.lastName === ”) {
err.lastName = ‘Last Name Required’
}
if (newformData.userName === ”) {
err.userName = ‘User Name Required’
}
if (newformData.email === ”) {
err.email = ‘Email Required’
}else{
let regex = /^[A-Za-z_]{3,}@[A-Za-z]{3,}[.]{1}[A-Za-z.]{2,6}$/;
if (!regex.test(newformData.email)){
err.email = ‘Email Not Valid’;
}
}
setFormError({ …err })
return Object.keys(err).length < 1;
}
const onSubmitHandler = (event) => {
event.preventDefault()
console.log(newformData)
let isValid = FormValidation()
console.log(isValid)
if (isValid) {
alert(“Submited”)
} else {
alert(‘In Valid’)
}
}
return (
<>
<Container>
<h1>Form Validation</h1>
<form onSubmit={onSubmitHandler}>
<div className=’form-group’>
<lable htmlFor=”firstName” className=”form-label”>First Name</lable>
<input type=”text” className=”form-label” name=’firstName’ placeholder=”First Name” onChange={onChangeHandler} />
<span className=’isNotValid’>{formError.firstName}</span>
</div>
<div className=’form-group’>
<lable htmlFor=”lastName” className=”form-label”>Last Name</lable>
<input type=”text” className=”form-label” name=’lastName’ placeholder=”Last Name” onChange={onChangeHandler} />
<span className=’isNotValid’>{formError.lastName}</span>
</div>
<div className=’form-group’>
<lable htmlFor=”userName” className=”form-label”>Username</lable>
<input type=”text” className=”form-label” name=’userName’ placeholder=”Username” onChange={onChangeHandler} />
<span className=’isNotValid’>{formError.userName}</span>
</div>
<div className=’form-group’>
<lable htmlFor=”email” className=”form-label”>Email Name</lable>
<input type=”email” className=”form-label” name=’email’ placeholder=”First Name” onChange={onChangeHandler} />
<span className=’isNotValid’>{formError.email}</span>
</div>
<button type=’submit’ className=’btn btn-primary’>Submit</button>
</form>
</Container>
</>
)
}