fix(form): show error at the end if inputs are not valid

packages/interface/src/components/ui/Form.tsx

@@ -9,6 +9,8 @@ import {
   type ComponentProps,
   forwardRef,
   cloneElement,
+  useState,
+  useCallback,
 } from "react";
 import {
   FormProvider,
@@ -62,7 +64,7 @@ export const Label = createComponent(
   }),
 );
 
-export const ErrorMessage = createComponent("div", tv({ base: "pt-1 text-xs text-red-500" }));
+export const ErrorMessage = createComponent("div", tv({ base: "pt-1 text-xs text-red" }));
 
 export const Textarea = createComponent("textarea", tv({ base: [...inputBase, "w-full"] }));
 
@@ -227,16 +229,27 @@ export const Form = <S extends z.Schema>({
     resolver: zodResolver(schema),
     mode: "onBlur",
   });
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const onSubmitForm = useCallback(
+    form.handleSubmit(
+      (data) => {
+        setErrorMessage(null);
+        onSubmit(data, form);
+      },
+      () => {
+        setErrorMessage("There are errors in the form. Please go back and check the warnings.");
+      },
+    ),
+    [],
+  );
 
   // Pass the form methods to a FormProvider. This lets us access the form from components with useFormContext
   return (
     <FormProvider {...form}>
-      <form
-        onSubmit={form.handleSubmit((data) => {
-          onSubmit(data, form);
-        })}
-      >
+      <form onSubmit={onSubmitForm}>
         {children}
+
+        {errorMessage && <ErrorMessage style={{ textAlign: "end" }}>{errorMessage}</ErrorMessage>}
       </form>
     </FormProvider>
   );