refactor(SW-360): trigger validation on submnission

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<SignUpSchema>({
     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,6 +171,24 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
               </Body>
             </Checkbox>
           </section>
+
+          {/* 
+            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 ? (
+            <Button
+              className={styles.signUpButton}
+              type="button"
+              theme="base"
+              intent="primary"
+              onClick={() => methods.trigger()}
+              data-testid="trigger-validation"
+            >
+              {intl.formatMessage({ id: "Sign up to Scandic Friends" })}
+            </Button>
+          ) : (
             <Button
               className={styles.signUpButton}
               type="submit"
@@ -191,10 +196,10 @@ export default function SignupForm({ 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>
+          )}
         </form>
       </FormProvider>
     </section>