function ValidatedForm() { const [formData, setFormData] = useState({ email: "", password: "" }); const [errors, setErrors] = useState({}); const validate = () => { let tempErrors = {}; if (!formData.email.includes("@")) { tempErrors.email = "Invalid email address!"; } if (formData.password.length < 6) { tempErrors.password = "Password must be at least 6 characters!"; } return tempErrors; }; const handleChange = (e) => { const { name, value } = e.target; setFormData((prevData) => ({ ...prevData, [name]: value })); }; const handleSubmit = (e) => { e.preventDefault(); const tempErrors = validate(); if (Object.keys(tempErrors).length === 0) { alert("Form submitted successfully!"); } else { setErrors(tempErrors); } }; return ( <form onSubmit={handleSubmit}> <div> <label>Email:</label> <input type="email" name="email" value={formData.email} onChange={handleChange} /> {errors.email && <p style={{ color: "red" }}>{errors.email}</p>} </div> <div> <label>Password:</label> <input type="password" name="password" value={formData.password} onChange={handleChange} /> {errors.password && <p style={{ color: "red" }}>{errors.password}</p>} </div> <button type="submit">Submit</button> </form> ); }