diff --git a/components/Forms/Signup/index.tsx b/components/Forms/Signup/index.tsx index d9a273560..39d389e91 100644 --- a/components/Forms/Signup/index.tsx +++ b/components/Forms/Signup/index.tsx @@ -1,7 +1,6 @@ "use client" import { zodResolver } from "@hookform/resolvers/zod" -import { useEffect, useState } from "react" import { FormProvider, useForm } from "react-hook-form" import { useIntl } from "react-intl" @@ -37,15 +36,13 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) { const phoneNumber = intl.formatMessage({ id: "Phone number" }) const zipCode = intl.formatMessage({ id: "Zip code" }) - const [isSubmitAttempted, setIsSubmitAttempted] = useState(false) - const methods = useForm({ defaultValues: { firstName: "", lastName: "", email: "", phoneNumber: "", - dateOfBirth: "", + dateOfBirth: "1995-01-01", address: { countryCode: "", zipCode: "", @@ -59,16 +56,6 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) { reValidateMode: "onChange", }) - // Trigger validation for all fields upon invalid submissions. - useEffect(() => { - if ( - isSubmitAttempted && - (!methods.formState.isValid || !methods.formState.isSubmitting) - ) { - methods.trigger() - } - }, [isSubmitAttempted, methods]) - async function onSubmit(data: SignUpSchema) { try { const result = await registerUser(data) @@ -184,17 +171,35 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) { - + + {/* + We use this approach to trigger validation for all invalid inputs upon submission. + To handle this programmatically in the future, we would need some major refactoring + of the Input component, which is out of scope for now. + */} + {!methods.formState.isValid ? ( + + ) : ( + + )}