diff --git a/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx b/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
index f69637847..bf6af6294 100644
--- a/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
+++ b/components/Blocks/DynamicContent/SignupFormWrapper/index.tsx
@@ -3,7 +3,7 @@ import { redirect } from "next/navigation"
import { overview } from "@/constants/routes/myPages"
import { auth } from "@/auth"
-import Form from "@/components/Forms/Signup"
+import SignupForm from "@/components/Forms/Signup"
import { getLang } from "@/i18n/serverContext"
import { SignupFormWrapperProps } from "@/types/components/blocks/dynamicContent"
@@ -16,5 +16,5 @@ export default async function SignupFormWrapper({
// We don't want to allow users to access signup if they are already authenticated.
redirect(overview[getLang()])
}
- return
+ return
}
diff --git a/components/Forms/Signup/index.tsx b/components/Forms/Signup/index.tsx
index d616d1e5f..d9a273560 100644
--- a/components/Forms/Signup/index.tsx
+++ b/components/Forms/Signup/index.tsx
@@ -1,7 +1,7 @@
"use client"
import { zodResolver } from "@hookform/resolvers/zod"
-import { useEffect,useState } from "react"
+import { useEffect, useState } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
@@ -29,9 +29,16 @@ import styles from "./form.module.css"
import type { SignUpFormProps } from "@/types/components/form/signupForm"
-export default function Form({ link, subtitle, title }: SignUpFormProps) {
+export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
const intl = useIntl()
const lang = useLang()
+ const country = intl.formatMessage({ id: "Country" })
+ const email = `${intl.formatMessage({ id: "Email" })} ${intl.formatMessage({ id: "Address" }).toLowerCase()}`
+ const phoneNumber = intl.formatMessage({ id: "Phone number" })
+ const zipCode = intl.formatMessage({ id: "Zip code" })
+
+ const [isSubmitAttempted, setIsSubmitAttempted] = useState(false)
+
const methods = useForm({
defaultValues: {
firstName: "",
@@ -51,12 +58,18 @@ export default function Form({ link, subtitle, title }: SignUpFormProps) {
resolver: zodResolver(signUpSchema),
reValidateMode: "onChange",
})
- const country = intl.formatMessage({ id: "Country" })
- const email = `${intl.formatMessage({ id: "Email" })} ${intl.formatMessage({ id: "Address" }).toLowerCase()}`
- const phoneNumber = intl.formatMessage({ id: "Phone number" })
- const zipCode = intl.formatMessage({ id: "Zip code" })
- async function handleSubmit(data: SignUpSchema) {
+ // 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)
if (result && !result.success) {
@@ -79,12 +92,12 @@ export default function Form({ link, subtitle, title }: SignUpFormProps) {