Install bootstrap
npm install react-bootstrap bootstrap@5.1.3
C:\reactdev\myreactdev>npm install react-bootstrap bootstrap@5.1.3
https://react-bootstrap.github.io/getting-started/introduction/
run
C:\reactdev\myreactdev>npm start src/index.js
//src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import 'bootstrap/dist/css/bootstrap.min.css' ReactDOM.render(public/index.html, document.getElementById('root') )
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReactJS </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js
//src/App.js
import React, { useState, useEffect } from "react";
function Contact() {
const [formvalue, setFormvalue]= useState({ name:'',email:'',address:''});
const [formerror, setFormerror] = useState({});
const [issubmit, setSubmit]= useState(false);
const handlevalidation =(e)=>{
const {name, value}= e.target;
setFormvalue({...formvalue, [name]: value});
}
const handlesubmit= (e)=>{
e.preventDefault();
setFormerror(validationform(formvalue));
setSubmit(true);
}
const validationform = (value)=>{
const errors= {};
const emailPattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(!value.name){
errors.name="Please Enter Name";
}
if(!value.email){
errors.email="Please Enter Email";
} else if(!emailPattern.test(value.email))
{
errors.email="Enter Valid Email";
}
if(!value.address){
errors.address="Please Enter Address";
}
return errors;
}
useEffect( ()=>{
if(Object.keys(formerror).length===0 && issubmit)
{
console.log(formvalue);
}
},[formerror, formvalue, issubmit]);
return (
<div className="container">
<div className="row mb-5">
<div className="col-sm-6 text-success">
<h3 className="fw-bold"> React js Contact form validation</h3>
</div>
<form onSubmit={ handlesubmit} >
<div className="row mb-4">
<label className="col-sm-2 col-form-label">Name<span className="astriccolor">*</span></label>
<div className="col-sm-5">
<input type="text" className="form-control" name="name" value={ formvalue.name} onChange={ handlevalidation} />
<span className="text-danger">{ formerror.name } </span>
</div>
</div>
<div className="row mb-4">
<label className="col-sm-2 col-form-label">Email<span className="astriccolor">*</span></label>
<div className="col-sm-5">
<input type="text" className="form-control" name="email" value={ formvalue.email} onChange={ handlevalidation} />
<span className="text-danger">{ formerror.email} </span>
</div>
</div>
<div className="row mb-4">
<label className="col-sm-2 col-form-label">Address<span className="astriccolor">*</span></label>
<div className="col-sm-5">
<textarea className="form-control" name="address" value={ formvalue.address} onChange={ handlevalidation} />
<span className="text-danger">{ formerror.address} </span>
</div>
</div>
<div className="row mb-4">
<label className="col-sm-2 col-form-label"></label>
<div className="col-sm-10">
<button className="btn btn-success" name="button">Submit</button>
</div>
</div>
</form>
</div>
</div>
);
}
export default Contact;
