Scribd
Upload
17 views6 pages

Form Validation Vaihavi

The document contains React code for a form component that handles user input with validation for name, email, and password fields. It utilizes hooks like useState for managing form data and errors, and useNavigate for routing to a success page upon successful submission. Additionally, the App component sets up routing for the form and success page, while the SuccessPage component displays a confirmation message and redirects back to the form after a timeout.

Uploaded by

vaibhmore09
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
17 views6 pages

Form Validation Vaihavi

The document contains React code for a form component that handles user input with validation for name, email, and password fields. It utilizes hooks like useState for managing form data and errors, and useNavigate for routing to a success page upon successful submission. Additionally, the App component sets up routing for the form and success page, while the SuccessPage component displays a confirmation message and redirects back to the form after a timeout.

Uploaded by

vaibhmore09
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 6

Form Validation React

Form.js
import { useState } from "react";

import {useNavigate } from 'react-router-dom';

const Form = (props) => {

const [FormData, setFormData] = useState({

name : '',

email : '',

password : ''

})

const navigate = useNavigate()

const [Errors, setErrors] = useState({})

const validate = () => {

const Newerrors = {}

if(!FormData.name){

Newerrors.name ='name is required'

if(!FormData.email) {

Newerrors.email = 'email is required'

} else if (!/\S+@\S+\.\S+/.test(FormData.email)) {

Newerrors.email = 'Email is invalid';

if(FormData.password.length < 6 || !FormData.password) {

Newerrors.password = 'password length should be maximum 6'

}
return Newerrors

const handlesubmit = () => {

const validationErrors = validate();

if(Object.keys(validationErrors).length > 0) {

setErrors(validationErrors)

} else{

setFormData({name :'', email: '' , password: '' })

console.log(FormData)

setErrors({})

navigate('/success')

const handleChange = (e) => {

const {name,value}= e.target

setFormData({...FormData, [name] : value})

setErrors({...Errors, [name] : ''})

return (

<form>

<label>Name</label>

<input

type="text"

name='name'
value={FormData.name}

onChange={handleChange}

placeholder="Name" />

{Errors.name && <p style={{color:'red'}}> {Errors.name}</p>}

<div>

<label> Email</label>

<input

type="email"

name='email'

value={FormData.email}

onChange={handleChange}

placeholder="Email" />

{Errors.email && <p style={{color:'red'}}> {Errors.email}</p>}

</div>

<div>

<label> Password</label>

<input

type="password"

name='password'

value={FormData.password}

onChange={handleChange}

placeholder="Password" />

{Errors.password && <p style={{color:'red'}}> {Errors.password}</p>}

</div>

<div>

<button
type='submit'

onClick={(event) => {

event.preventDefault();

handlesubmit()

// alert('form Sucessfully Submitted')

}}>

Submit

</button>

</div>

</form>

export default Form

App.js

import React, {use, useEffect} from "react";

import Memohook from "./memohook";

import Form from "./Form";

import { BrowserRouter as Router, Route, Switch, Routes } from 'react-router-dom';

import SuccessPage from "./Sucesspage";

function App() {
useEffect(() =>{

console.log('render')

return () => console.log('hello mayur')

},[])

return(

<>

<Router>

<switch>

<Routes>

<Route path="/" exact Component={Form}/>

<Route path="Success" exact Component={SuccessPage}/>

</Routes>

</switch>

</Router>

</>

export default App;

//usestate and usemmemo

Successpage.js
// src/SuccessPage.js

import React, { useEffect } from 'react';

import { useNavigate } from 'react-router-dom';

const SuccessPage = () => {

const navigate = useNavigate()

useEffect(() => {

const timer = () => {

setTimeout(() => {

navigate.push('/')

}, 4000);

return () => clearTimeout(timer);

}, [navigate])

return (

<div>

<h1>Form Submitted Successfully!</h1>

<p>Thank you for your submission.</p>

</div>

);

};

export default SuccessPage;

You might also like