feat(SW-360): trigger validation on form submission

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 <Form {...dynamic_content} />
+  return <SignupForm {...dynamic_content} />
 }

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<SignUpSchema>({
     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) {
         <form
           className={styles.form}
           id="register"
+          onSubmit={methods.handleSubmit(onSubmit)}
           /**
            * Ignoring since ts doesn't recognize that tRPC
            * parses FormData before reaching the route
            * @ts-ignore */
           action={registerUser}
-          onSubmit={methods.handleSubmit(handleSubmit)}
         >
           <section className={styles.userInfo}>
             <div className={styles.container}>
@@ -178,6 +191,7 @@ export default function Form({ link, subtitle, title }: SignUpFormProps) {
             intent="primary"
             disabled={methods.formState.isSubmitting}
             data-testid="submit"
+            onClick={() => setIsSubmitAttempted(true)}
           >
             {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
           </Button>