Scribd
Upload
3 views3 pages

Registration Form

The document contains a React component for a registration form that captures user input for name, password, and email. It includes validation to ensure all fields are filled out before submission and displays error messages accordingly. The form also allows users to reset their input, clearing any entered data and error messages.

Uploaded by

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

Registration Form

The document contains a React component for a registration form that captures user input for name, password, and email. It includes validation to ensure all fields are filled out before submission and displays error messages accordingly. The form also allows users to reset their input, clearing any entered data and error messages.

Uploaded by

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

import { useState } from "react";

function RegistrationForm() {
const [user, setUser] = useState({ name: "", password: "", email: "" });
const [error, setError] = useState({});

const isEmpty = (ele) => {


return ele === null || ele === "";
};

const handleSubmit = (event) => {


event.preventDefault();
setError({});

let formHasErrors = false;

if (isEmpty(user.name)) {
setError((prevError) => ({ ...prevError, name: "Please enter name" }));
formHasErrors = true;
}
if (isEmpty(user.password)) {
setError((prevError) => ({
...prevError,
password: "Please enter password",
}));
formHasErrors = true;
}
if (isEmpty(user.email)) {
setError((prevError) => ({
...prevError,
email: "Please enter email",
}));
formHasErrors = true;
}

if (formHasErrors) return; // Prevent submission if there are errors

// Simulating form submission


alert("User: " + JSON.stringify(user));
};

const handleReset = (event) => {


event.preventDefault();
setUser({ name: "", password: "", email: "" });
setError({});
};

const handleChange = (event) => {


const { name, value } = event.target;
setUser({ ...user, [name]: value });

// Remove error when the user starts typing


if (value !== "") {
setError((prevError) => ({ ...prevError, [name]: "" }));
}
};

return (
<div>
<h1>Registration Form</h1>
<form onSubmit={handleSubmit}>
<div>
<label>
Name:
<input
type="text"
name="name"
value={user.name}
onChange={handleChange}
/>
{error?.name && (
<div style={{ color: "red", fontSize: "12px" }}>{error.name}</div>
)}
</label>
</div>
<div>
<label>
Password:
<input
type="password"
name="password"
value={user.password}
onChange={handleChange}
/>
{error?.password && (
<div style={{ color: "red", fontSize: "12px" }}>
{error.password}
</div>
)}
</label>
</div>
<div>
<label>
Email:
<input
type="email"
name="email"
value={user.email}
onChange={handleChange}
/>
{error?.email && (
<div style={{ color: "red", fontSize: "12px" }}>
{error.email}
</div>
)}
</label>
</div>
<div>
<button type="submit">Register</button>
<button type="reset" onClick={handleReset}>
Clear
</button>
</div>
</form>
</div>
);
}
export default RegistrationForm;

You might also like