add card details validation

src/pages/CardDetails/CardDetails.tsx

@@ -27,6 +27,7 @@ export default function CardDetailsPage() {
     useState(false);
   const { subdomain } = useParams();
   const navigate = useNavigate();
+  const [form] = Form.useForm();
 
   // Find the initial index based on selected cardId from gift details
   useEffect(() => {
@@ -54,9 +55,14 @@ export default function CardDetailsPage() {
 
   const currentCard = cards && cards.length > 0 ? cards[currentIndex] : null;
 
-  const handleCheckout = useCallback(() => {
-    navigate(`/${subdomain}/checkout`);
-  }, [subdomain]);
+  const handleCheckout = useCallback(async () => {
+    try {
+      await form.validateFields();
+      navigate(`/${subdomain}/checkout`);
+    } catch (error) {
+      console.log(error);
+    }
+  }, [subdomain, form, navigate]);
 
   return (
     <>
@@ -136,6 +142,7 @@ export default function CardDetailsPage() {
             </div>
           )}
           <Form
+            form={form}
             layout="vertical"
             style={{ display: "flex", flexDirection: "column", gap: 16 }}
           >