From dcd2a6640d2f343e5934648e277227939971350a Mon Sep 17 00:00:00 2001
From: Ayobami <lynxdev32@gmail.com>
Date: Sun, 6 Jul 2025 13:29:50 +0100
Subject: [PATCH] Fix: issue 11, error not showing up for under 18

---
 src/pages/Common/SignUp/SignUpDetailsForm.jsx | 41 +++++++++++++------
 1 file changed, 29 insertions(+), 12 deletions(-)

diff --git a/src/pages/Common/SignUp/SignUpDetailsForm.jsx b/src/pages/Common/SignUp/SignUpDetailsForm.jsx
index 16394a5..5640212 100644
--- a/src/pages/Common/SignUp/SignUpDetailsForm.jsx
+++ b/src/pages/Common/SignUp/SignUpDetailsForm.jsx
@@ -45,11 +45,14 @@ export default function SignUpDetailsForm() {
     if (!date) return false;
     const now = new Date();
     const dob = new Date(date);
+
     let age = now.getFullYear() - dob.getFullYear();
-    const m = now.getMonth() - dob.getMonth();
-    if (m < 0 || (m === 0 && now.getDate() < dob.getDate())) {
+    const monthDiff = now.getMonth() - dob.getMonth();
+
+    if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < dob.getDate())) {
       age--;
     }
+
     return age >= 18;
   }
 
@@ -132,6 +135,13 @@ export default function SignUpDetailsForm() {
     );
   }, [data.password, data.firstName, data.lastName, data.dob]);
 
+  // --- Trigger DOB validation when date changes ---
+  React.useEffect(() => {
+    if (data.dob && !isSameDay(data.dob, initialDate.current)) {
+      trigger("dob");
+    }
+  }, [data.dob, trigger]);
+
   // --- Terms and Privacy Modal handlers ---
   function handleAgreeTerms() {
     setAgreedToTerms(true);
@@ -257,16 +267,23 @@ export default function SignUpDetailsForm() {
             </p>
           </div>
 
-          <DatePickerV2
-            control={control}
-            name='dob'
-            min={new Date("1950-01-01")}
-            max={initialDate.current}
-            setValue={(v) => setValue("dob", v)}
-          />
-          <p className='mt-2 block text-xs italic text-red-500'>
-            {errors.dob?.message}
-          </p>
+          <div className='flex flex-col'>
+            <DatePickerV2
+              control={control}
+              name='dob'
+              min={new Date("1950-01-01")}
+              max={initialDate.current}
+              setValue={(v) => {
+                setValue("dob", v);
+                trigger("dob");
+              }}
+            />
+            {errors.dob && (
+              <p className='mb-1 block text-xs italic text-red-500'>
+                {errors.dob.message}
+              </p>
+            )}
+          </div>
 
           <div
             className={`${