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