Fix: issue 11, error not showing up for under 18

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();
+    const monthDiff = now.getMonth() - dob.getMonth();
-    if (m < 0 || (m === 0 && now.getDate() < dob.getDate())) {
+
+    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
+          <div className='flex flex-col'>
-            control={control}
+            <DatePickerV2
-            name='dob'
+              control={control}
-            min={new Date("1950-01-01")}
+              name='dob'
-            max={initialDate.current}
+              min={new Date("1950-01-01")}
-            setValue={(v) => setValue("dob", v)}
+              max={initialDate.current}
-          />
+              setValue={(v) => {
-          <p className='mt-2 block text-xs italic text-red-500'>
+                setValue("dob", v);
-            {errors.dob?.message}
+                trigger("dob");
-          </p>
+              }}
+            />
+            {errors.dob && (
+              <p className='mb-1 block text-xs italic text-red-500'>
+                {errors.dob.message}
+              </p>
+            )}
+          </div>
 
           <div
             className={`${