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