Skip to content

Commit c47f506

Browse files
sameerkalisameerkali
committed
testing over on local server
1 parent c61221f commit c47f506

File tree

1 file changed

+92
-116
lines changed

1 file changed

+92
-116
lines changed

‎src/All Assessment/assessment24/FormValidation.jsx‎

Lines changed: 92 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,99 @@
1-
// import React, { useState } from "react";
2-
// import GoToHome from "../../Components/GoToHome";
1+
import React, { useState } from "react";
2+
import GoToHome from "../../Components/GoToHome";
33

4-
// const FormValidation = () => {
5-
// const [name, setName] = useState("");
6-
// const [email, setEmail] = useState("");
7-
// const [password, setPassword] = useState("");
8-
// const [errors, setErrors] = useState({});
9-
10-
// const validateForm = () => {
11-
// const newErrors = {};
12-
13-
// if (!name.trim()) {
14-
// newErrors.name = "Name is required.";
15-
// }
16-
// if (!email.trim()) {
17-
// newErrors.email = "Email is required.";
18-
// } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
19-
// newErrors.email = "Invalid email format.";
20-
// }
21-
// if (!password.trim()) {
22-
// newErrors.password = "Password is required.";
23-
// } else if (password.length < 6) {
24-
// newErrors.password = "Password must be at least 6 characters.";
25-
// }
26-
27-
// return newErrors;
28-
// };
29-
30-
// const handleFormSubmit = (e) => {
31-
// e.preventDefault();
32-
// const formErrors = validateForm();
33-
// if (Object.keys(formErrors).length > 0) {
34-
// setErrors(formErrors);
35-
// } else {
36-
// alert("Form submitted successfully!");
37-
// setErrors({});
38-
// // Reset fields after submission
39-
// setName("");
40-
// setEmail("");
41-
// setPassword("");
42-
// }
43-
// };
44-
45-
// return (
46-
// <div className="h-screen flex justify-center items-center bg-gray-100">
47-
48-
// <div className="w-full max-w-sm bg-white p-6 rounded shadow-lg">
49-
// <h1 className="text-2xl font-bold text-center mb-4">Form Validation</h1>
50-
// <form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
51-
// <div>
52-
// <input
53-
// type="text"
54-
// placeholder="Name"
55-
// value={name}
56-
// onChange={(e) => setName(e.target.value)}
57-
// className="border-2 p-2 w-full rounded"
58-
// />
59-
// {errors.name && (
60-
// <p className="text-red-500 text-sm mt-1">{errors.name}</p>
61-
// )}
62-
// </div>
63-
// <div>
64-
// <input
65-
// type="email"
66-
// placeholder="abc@xyz.com"
67-
// value={email}
68-
// onChange={(e) => setEmail(e.target.value)}
69-
// className="border-2 p-2 w-full rounded"
70-
// />
71-
// {errors.email && (
72-
// <p className="text-red-500 text-sm mt-1">{errors.email}</p>
73-
// )}
74-
// </div>
75-
// <div>
76-
// <input
77-
// type="password"
78-
// placeholder="Password"
79-
// value={password}
80-
// onChange={(e) => setPassword(e.target.value)}
81-
// className="border-2 p-2 w-full rounded"
82-
// />
83-
// {errors.password && (
84-
// <p className="text-red-500 text-sm mt-1">{errors.password}</p>
85-
// )}
86-
// </div>
87-
// <button
88-
// type="submit"
89-
// className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
90-
// >
91-
// Submit
92-
// </button>
93-
// <GoToHome />
94-
// </form>
95-
// </div>
96-
// </div>
97-
// );
98-
// };
99-
// export default FormValidation;
4+
const FormValidation = () => {
5+
const [name, setName] = useState("");
6+
const [email, setEmail] = useState("");
7+
const [password, setPassword] = useState("");
8+
const [errors, setErrors] = useState({});
1009

10+
const validateForm = () => {
11+
const newErrors = {};
10112

102-
import React, { useEffect, useState } from 'react'
13+
if (!name.trim()) {
14+
newErrors.name = "Name is required.";
15+
}
16+
if (!email.trim()) {
17+
newErrors.email = "Email is required.";
18+
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
19+
newErrors.email = "Invalid email format.";
20+
}
21+
if (!password.trim()) {
22+
newErrors.password = "Password is required.";
23+
} else if (password.length < 6) {
24+
newErrors.password = "Password must be at least 6 characters.";
25+
}
10326

104-
const FormValidation = () => {
105-
const [data, setData] = useState([])
106-
console.log(data)
27+
return newErrors;
28+
};
10729

108-
const call = async()=> {
109-
let a = await fetch("http://localhost:6969/")
110-
let b = await a.json()
111-
console.log(a)
112-
setData(b)
113-
}
114-
useEffect(() => {
115-
call()
116-
}, []);
30+
const handleFormSubmit = (e) => {
31+
e.preventDefault();
32+
const formErrors = validateForm();
33+
if (Object.keys(formErrors).length > 0) {
34+
setErrors(formErrors);
35+
} else {
36+
alert("Form submitted successfully!");
37+
setErrors({});
38+
// Reset fields after submission
39+
setName("");
40+
setEmail("");
41+
setPassword("");
42+
}
43+
};
11744

11845
return (
119-
<div className='flex h-screen items-center justify-center'>{`sam`}</div>
120-
)
121-
}
122-
123-
export default FormValidation
46+
<div className="h-screen flex justify-center items-center bg-gray-100">
47+
48+
<div className="w-full max-w-sm bg-white p-6 rounded shadow-lg">
49+
<h1 className="text-2xl font-bold text-center mb-4">Form Validation</h1>
50+
<form onSubmit={handleFormSubmit} className="flex flex-col gap-4">
51+
<div>
52+
<input
53+
type="text"
54+
placeholder="Name"
55+
value={name}
56+
onChange={(e) => setName(e.target.value)}
57+
className="border-2 p-2 w-full rounded"
58+
/>
59+
{errors.name && (
60+
<p className="text-red-500 text-sm mt-1">{errors.name}</p>
61+
)}
62+
</div>
63+
<div>
64+
<input
65+
type="email"
66+
placeholder="abc@xyz.com"
67+
value={email}
68+
onChange={(e) => setEmail(e.target.value)}
69+
className="border-2 p-2 w-full rounded"
70+
/>
71+
{errors.email && (
72+
<p className="text-red-500 text-sm mt-1">{errors.email}</p>
73+
)}
74+
</div>
75+
<div>
76+
<input
77+
type="password"
78+
placeholder="Password"
79+
value={password}
80+
onChange={(e) => setPassword(e.target.value)}
81+
className="border-2 p-2 w-full rounded"
82+
/>
83+
{errors.password && (
84+
<p className="text-red-500 text-sm mt-1">{errors.password}</p>
85+
)}
86+
</div>
87+
<button
88+
type="submit"
89+
className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
90+
>
91+
Submit
92+
</button>
93+
<GoToHome />
94+
</form>
95+
</div>
96+
</div>
97+
);
98+
};
99+
export default FormValidation;

0 commit comments

Comments
 (0)