From 9fcd2985debdc2a9d02a7fe7fa4a59f4d7068a81 Mon Sep 17 00:00:00 2001
From: zlayine <zlayine@enjin.io>
Date: Mon, 10 Jun 2024 09:27:37 +0300
Subject: [PATCH] add form validation notification error

---
 resources/js/components/batch/BatchMint.vue   | 19 +++++++++++++++--
 .../js/components/batch/BatchSetAttribute.vue | 19 +++++++++++++++--
 .../js/components/batch/BatchTransfer.vue     | 19 +++++++++++++++--
 .../components/pages/SettingsChangeEmail.vue  | 12 ++++++++++-
 .../pages/SettingsResetPassword.vue           | 12 ++++++++++-
 resources/js/components/pages/Setup.vue       | 19 +++++++++++++++--
 resources/js/components/pages/auth/Login.vue  | 15 ++++++++++++-
 .../js/components/pages/auth/Register.vue     | 19 +++++++++++++++--
 .../pages/auth/RequestResetPassword.vue       | 19 +++++++++++++++--
 .../components/pages/auth/ResetPassword.vue   | 19 +++++++++++++++--
 .../js/components/pages/create/CreateBeam.vue | 21 ++++++++++++++++---
 .../pages/create/CreateCollection.vue         | 19 +++++++++++++++--
 .../pages/create/CreateFuelTank.vue           | 19 +++++++++++++++--
 .../components/pages/create/CreateListing.vue | 19 +++++++++++++++--
 .../components/pages/create/CreateToken.vue   | 19 +++++++++++++++--
 .../slideovers/beam/DeleteBeamSlideover.vue   | 12 ++++++++++-
 .../slideovers/beam/UpdateBeamSlideover.vue   | 12 ++++++++++-
 .../collection/ApproveCollectionSlideover.vue | 12 ++++++++++-
 .../collection/DestroyCollectionSlideover.vue | 12 ++++++++++-
 .../collection/MutateCollectionSlideover.vue  | 12 ++++++++++-
 .../UnapproveCollectionSlideover.vue          | 12 ++++++++++-
 .../slideovers/common/FreezeSlideover.vue     | 12 ++++++++++-
 .../slideovers/common/ThawSlideover.vue       | 12 ++++++++++-
 .../common/TransferBalanceSlideover.vue       | 12 ++++++++++-
 .../fueltank/AccountsFuelTankSlideover.vue    | 20 ++++++++++++++++--
 .../fueltank/ConsumptionFuelTankSlideover.vue | 12 ++++++++++-
 .../fueltank/DestroyFuelTankSlideover.vue     | 12 ++++++++++-
 .../fueltank/DispatchFuelTankSlideover.vue    | 12 ++++++++++-
 .../fueltank/FreezeFuelTankSlideover.vue      | 12 ++++++++++-
 .../fueltank/MutateFuelTankSlideover.vue      | 12 ++++++++++-
 .../marketplace/CancelListingSlideover.vue    | 12 ++++++++++-
 .../marketplace/FillListingSlideover.vue      | 12 ++++++++++-
 .../marketplace/FinalizeAuctionSlideover.vue  | 12 ++++++++++-
 .../marketplace/PlaceBidSlideover.vue         | 12 ++++++++++-
 .../token/ApproveTokenSlideover.vue           | 12 ++++++++++-
 .../slideovers/token/BurnTokenSlideover.vue   | 12 ++++++++++-
 .../slideovers/token/MintTokenSlideover.vue   | 12 ++++++++++-
 .../slideovers/token/MutateTokenSlideover.vue | 12 ++++++++++-
 .../token/TransferTokenSlideover.vue          | 12 ++++++++++-
 .../token/UnapproveTokenSlideover.vue         | 12 ++++++++++-
 40 files changed, 523 insertions(+), 54 deletions(-)

diff --git a/resources/js/components/batch/BatchMint.vue b/resources/js/components/batch/BatchMint.vue
index 66d317a..354633e 100644
--- a/resources/js/components/batch/BatchMint.vue
+++ b/resources/js/components/batch/BatchMint.vue
@@ -1,7 +1,13 @@
 <template>
     <div class="mt-4 flow-root">
         <div class="space-y-6 pb-4">
-            <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="createBatch">
+            <Form
+                ref="formRef"
+                class="space-y-6"
+                :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
+                @submit="createBatch"
+            >
                 <div
                     class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-5 shadow sm:rounded-lg sm:p-6"
                 >
@@ -166,9 +172,18 @@ const isAllValid = computed(() => {
     );
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const createBatch = async () => {
     await formRef.value.validate();
-    if (!isAllValid.value) return;
+    if (!isAllValid.value) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/batch/BatchSetAttribute.vue b/resources/js/components/batch/BatchSetAttribute.vue
index 6055183..31a4661 100644
--- a/resources/js/components/batch/BatchSetAttribute.vue
+++ b/resources/js/components/batch/BatchSetAttribute.vue
@@ -1,7 +1,13 @@
 <template>
     <div class="mt-4 flow-root">
         <div class="space-y-4 pb-4">
-            <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="createBatch">
+            <Form
+                ref="formRef"
+                class="space-y-6"
+                :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
+                @submit="createBatch"
+            >
                 <div class="bg-light-surface-primary dark:bg-dark-surface-primary p-6 shadow rounded-lg">
                     <div class="space-y-6">
                         <div class="flex items-center">
@@ -182,9 +188,18 @@ const removeAttributeItem = (index: number) => {
     attributes.value.splice(index, 1);
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const createBatch = async () => {
     await formRef.value.validate();
-    if (!formRef.value.getMeta().valid) return;
+    if (!formRef.value.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/batch/BatchTransfer.vue b/resources/js/components/batch/BatchTransfer.vue
index 411aabd..b3f1eb2 100644
--- a/resources/js/components/batch/BatchTransfer.vue
+++ b/resources/js/components/batch/BatchTransfer.vue
@@ -1,7 +1,13 @@
 <template>
     <div class="mt-4 flow-root">
         <div class="space-y-6 pb-4">
-            <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="createBatch">
+            <Form
+                ref="formRef"
+                class="space-y-6"
+                :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
+                @submit="createBatch"
+            >
                 <div
                     class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-5 shadow sm:rounded-lg sm:p-6"
                 >
@@ -171,9 +177,18 @@ const isAllValid = computed(() => {
     );
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const createBatch = async () => {
     await formRef.value.validate();
-    if (!isAllValid.value) return;
+    if (!isAllValid.value) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/pages/SettingsChangeEmail.vue b/resources/js/components/pages/SettingsChangeEmail.vue
index 3bf6320..84c6abe 100644
--- a/resources/js/components/pages/SettingsChangeEmail.vue
+++ b/resources/js/components/pages/SettingsChangeEmail.vue
@@ -6,6 +6,7 @@
                 ref="formRef"
                 class="space-y-6"
                 :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
                 @submit="changeEmail"
             >
                 <FormInput
@@ -69,8 +70,17 @@ const isValid = async () => {
     return formRef.value.getMeta().valid;
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const changeEmail = async () => {
-    if (!(await isValid())) return;
+    if (!(await isValid())) {
+        return;
+    }
 
     verifyPasswordModal.value = true;
 };
diff --git a/resources/js/components/pages/SettingsResetPassword.vue b/resources/js/components/pages/SettingsResetPassword.vue
index aa81fc9..2a2cdeb 100644
--- a/resources/js/components/pages/SettingsResetPassword.vue
+++ b/resources/js/components/pages/SettingsResetPassword.vue
@@ -6,6 +6,7 @@
                 ref="formRef"
                 class="space-y-6"
                 :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
                 @submit="resetPassword"
             >
                 <FormInput
@@ -75,8 +76,17 @@ const isValid = async () => {
     return formRef.value.getMeta().valid;
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const resetPassword = async () => {
-    if (!(await isValid())) return;
+    if (!(await isValid())) {
+        return;
+    }
 
     isLoading.value = true;
     try {
diff --git a/resources/js/components/pages/Setup.vue b/resources/js/components/pages/Setup.vue
index 36bbf42..fdffb42 100644
--- a/resources/js/components/pages/Setup.vue
+++ b/resources/js/components/pages/Setup.vue
@@ -11,7 +11,13 @@
         </div>
         <div class="mt-8 mx-auto w-full sm:max-w-md">
             <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-8 shadow sm:rounded-lg sm:px-10">
-                <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="setupAccount">
+                <Form
+                    ref="formRef"
+                    class="space-y-6"
+                    :validation-schema="validation"
+                    @invalid-submit="invalidSubmit"
+                    @submit="setupAccount"
+                >
                     <FormInput
                         v-model="url"
                         label="Enjin Platform URL"
@@ -69,9 +75,18 @@ const isValid = async () => {
     return formRef.value.getMeta().valid;
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const setupAccount = async () => {
     try {
-        if (!(await isValid())) return;
+        if (!(await isValid())) {
+            return;
+        }
         isLoading.value = true;
 
         if (window.location.protocol === 'https:' && url.value?.protocol === 'http:') {
diff --git a/resources/js/components/pages/auth/Login.vue b/resources/js/components/pages/auth/Login.vue
index 6240209..0f414f7 100644
--- a/resources/js/components/pages/auth/Login.vue
+++ b/resources/js/components/pages/auth/Login.vue
@@ -18,7 +18,13 @@
         </div>
         <div class="mt-4 mx-auto w-full sm:max-w-md">
             <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-8 shadow sm:rounded-lg sm:px-10">
-                <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="verifyCaptcha">
+                <Form
+                    ref="formRef"
+                    class="space-y-6"
+                    :validation-schema="validation"
+                    @invalid-submit="invalidSubmit"
+                    @submit="verifyCaptcha"
+                >
                     <FormInput
                         v-model="email"
                         label="Email address"
@@ -141,6 +147,13 @@ const verifyCaptcha = () => {
     captchaRef.value.execute();
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const login = async (recaptcha?: string) => {
     if (!(await isValid())) return;
 
diff --git a/resources/js/components/pages/auth/Register.vue b/resources/js/components/pages/auth/Register.vue
index 2e3fb88..c3b9b72 100644
--- a/resources/js/components/pages/auth/Register.vue
+++ b/resources/js/components/pages/auth/Register.vue
@@ -11,7 +11,13 @@
         </div>
         <div class="mt-8 mx-auto w-full sm:max-w-md">
             <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-8 shadow sm:rounded-lg sm:px-10">
-                <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="verifyCaptcha">
+                <Form
+                    ref="formRef"
+                    class="space-y-6"
+                    :validation-schema="validation"
+                    @invalid-submit="invalidSubmit"
+                    @submit="verifyCaptcha"
+                >
                     <FormInput
                         v-model="email"
                         label="Email address"
@@ -146,8 +152,17 @@ const verifyCaptcha = () => {
     captchaRef.value.execute();
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const register = async (recaptcha?: string) => {
-    if (!(await isValid())) return;
+    if (!(await isValid())) {
+        return;
+    }
 
     isLoading.value = true;
     try {
diff --git a/resources/js/components/pages/auth/RequestResetPassword.vue b/resources/js/components/pages/auth/RequestResetPassword.vue
index b435996..0c3e42d 100644
--- a/resources/js/components/pages/auth/RequestResetPassword.vue
+++ b/resources/js/components/pages/auth/RequestResetPassword.vue
@@ -11,7 +11,13 @@
         </div>
         <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
             <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-8 shadow sm:rounded-lg sm:px-10">
-                <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="verifyCaptcha">
+                <Form
+                    ref="formRef"
+                    class="space-y-6"
+                    :validation-schema="validation"
+                    @invalid-submit="invalidSubmit"
+                    @submit="verifyCaptcha"
+                >
                     <p class="text-sm text-center">
                         Enter your registered email below to receive password reset instructions
                     </p>
@@ -125,8 +131,17 @@ const verifyCaptcha = () => {
     captchaRef.value.execute();
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const requestReset = async (recaptcha?: string) => {
-    if (!(await isValid())) return;
+    if (!(await isValid())) {
+        return;
+    }
 
     isLoading.value = true;
     try {
diff --git a/resources/js/components/pages/auth/ResetPassword.vue b/resources/js/components/pages/auth/ResetPassword.vue
index 8725377..a0145a4 100644
--- a/resources/js/components/pages/auth/ResetPassword.vue
+++ b/resources/js/components/pages/auth/ResetPassword.vue
@@ -11,7 +11,13 @@
         </div>
         <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
             <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-8 shadow sm:rounded-lg sm:px-10">
-                <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="resetPassword">
+                <Form
+                    ref="formRef"
+                    class="space-y-6"
+                    :validation-schema="validation"
+                    @invalid-submit="invalidSubmit"
+                    @submit="resetPassword"
+                >
                     <FormInput
                         v-model="email"
                         label="Email"
@@ -89,8 +95,17 @@ const isValid = async () => {
     return formRef.value.getMeta().valid;
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const resetPassword = async () => {
-    if (!(await isValid())) return;
+    if (!(await isValid())) {
+        return;
+    }
 
     isLoading.value = true;
     try {
diff --git a/resources/js/components/pages/create/CreateBeam.vue b/resources/js/components/pages/create/CreateBeam.vue
index 618d191..2bf3627 100644
--- a/resources/js/components/pages/create/CreateBeam.vue
+++ b/resources/js/components/pages/create/CreateBeam.vue
@@ -10,7 +10,7 @@
                 :class="{ 'border border-red-400': !item.valid, 'border border-green-400': item.valid }"
                 class="animate-fade-in"
                 :title="`Beam Asset ${idx + 1}`"
-                :duskId="`tab${idx+ 1 }`"
+                :duskId="`tab${idx + 1}`"
             >
                 <template #icon>
                     <CheckCircleIcon class="ml-2 my-auto h-5 w-5 text-green-400" aria-hidden="true" v-if="item.valid" />
@@ -26,7 +26,13 @@
             </CollapseCard>
             <Btn class="!flex" @click="addItem" primary>Add Asset</Btn>
 
-            <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="createBeam">
+            <Form
+                ref="formRef"
+                class="space-y-6"
+                :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
+                @submit="createBeam"
+            >
                 <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-5 shadow rounded-lg sm:p-6">
                     <div class="space-y-6">
                         <div class="flex justify-between items-center">
@@ -218,9 +224,18 @@ const validateForms = async () => {
     await formRef.value.validate();
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const createBeam = async () => {
     await validateForms();
-    if (!isAllValid.value) return;
+    if (!isAllValid.value) {
+        return;
+    }
     try {
         isLoading.value = true;
         const res = await BeamApi.createBeam(
diff --git a/resources/js/components/pages/create/CreateCollection.vue b/resources/js/components/pages/create/CreateCollection.vue
index 8b29a29..d959101 100644
--- a/resources/js/components/pages/create/CreateCollection.vue
+++ b/resources/js/components/pages/create/CreateCollection.vue
@@ -12,7 +12,13 @@
                     <Btn dusk="advancedBtn" :primary="mode === 'advanced'" @click="mode = 'advanced'"> Advanced </Btn>
                 </div>
             </div>
-            <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="createCollection">
+            <Form
+                ref="formRef"
+                class="space-y-6"
+                :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
+                @submit="createCollection"
+            >
                 <div class="bg-light-surface-primary dark:bg-dark-surface-primary p-4 md:p-6 shadow rounded-lg">
                     <div class="space-y-6">
                         <div class="flex justify-between items-center">
@@ -474,8 +480,17 @@ const isValid = async () => {
     return formRef.value.getMeta().valid;
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const createCollection = async () => {
-    if (!(await isValid())) return;
+    if (!(await isValid())) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/pages/create/CreateFuelTank.vue b/resources/js/components/pages/create/CreateFuelTank.vue
index 10c54e0..38209db 100644
--- a/resources/js/components/pages/create/CreateFuelTank.vue
+++ b/resources/js/components/pages/create/CreateFuelTank.vue
@@ -4,7 +4,13 @@
             <div class="mb-4">
                 <h1 class="text-2xl text-light-content-strong dark:text-dark-content-strong">Create Fuel Tank</h1>
             </div>
-            <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="createFueltank">
+            <Form
+                ref="formRef"
+                class="space-y-6"
+                :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
+                @submit="createFueltank"
+            >
                 <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-5 shadow rounded-lg sm:p-6">
                     <div class="">
                         <div class="space-y-6">
@@ -244,9 +250,18 @@ const validateForms = async () => {
     await formRef.value.validate();
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const createFueltank = async () => {
     await validateForms();
-    if (!isAllValid.value) return;
+    if (!isAllValid.value) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/pages/create/CreateListing.vue b/resources/js/components/pages/create/CreateListing.vue
index 1392ba4..1ac005a 100644
--- a/resources/js/components/pages/create/CreateListing.vue
+++ b/resources/js/components/pages/create/CreateListing.vue
@@ -6,7 +6,13 @@
                     Create Listing
                 </h1>
             </div>
-            <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="createListing">
+            <Form
+                ref="formRef"
+                class="space-y-6"
+                :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
+                @submit="createListing"
+            >
                 <div class="bg-light-surface-primary dark:bg-dark-surface-primary px-4 py-5 shadow rounded-lg sm:p-6">
                     <div class="space-y-6">
                         <div class="">
@@ -247,8 +253,17 @@ const getCurrentBlock = async () => {
     }
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const createListing = async () => {
-    if (!(await isValid())) return;
+    if (!(await isValid())) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/pages/create/CreateToken.vue b/resources/js/components/pages/create/CreateToken.vue
index 38e8b74..5fdab6b 100644
--- a/resources/js/components/pages/create/CreateToken.vue
+++ b/resources/js/components/pages/create/CreateToken.vue
@@ -10,7 +10,13 @@
                     <Btn dusk="advancedBtn" :primary="mode === 'advanced'" @click="mode = 'advanced'"> Advanced </Btn>
                 </div>
             </div>
-            <Form ref="formRef" class="space-y-6" :validation-schema="validation" @submit="createToken">
+            <Form
+                ref="formRef"
+                class="space-y-6"
+                :validation-schema="validation"
+                @invalid-submit="invalidSubmit"
+                @submit="createToken"
+            >
                 <div
                     class="bg-light-surface-primary dark:bg-dark-surface-primary p-4 md:p-6 shadow rounded-lg sm:p-6 transition-all"
                 >
@@ -408,8 +414,17 @@ const simpleAttributes = () => {
     ].filter((a) => a.value !== '');
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const createToken = async () => {
-    if (!(await isValid())) return;
+    if (!(await isValid())) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/beam/DeleteBeamSlideover.vue b/resources/js/components/slideovers/beam/DeleteBeamSlideover.vue
index 91e2534..1edb1a1 100644
--- a/resources/js/components/slideovers/beam/DeleteBeamSlideover.vue
+++ b/resources/js/components/slideovers/beam/DeleteBeamSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="deleteBeam"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -67,9 +68,18 @@ const validation = yup.object({
     code: stringRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const deleteBeam = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/beam/UpdateBeamSlideover.vue b/resources/js/components/slideovers/beam/UpdateBeamSlideover.vue
index 791e97b..23c0fc0 100644
--- a/resources/js/components/slideovers/beam/UpdateBeamSlideover.vue
+++ b/resources/js/components/slideovers/beam/UpdateBeamSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="updateBeam"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -158,9 +159,18 @@ const checkChanges = () => {
     };
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const updateBeam = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/collection/ApproveCollectionSlideover.vue b/resources/js/components/slideovers/collection/ApproveCollectionSlideover.vue
index 3941266..4fd4877 100644
--- a/resources/js/components/slideovers/collection/ApproveCollectionSlideover.vue
+++ b/resources/js/components/slideovers/collection/ApproveCollectionSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="approveCollection"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -115,9 +116,18 @@ const validation = yup.object({
     skipValidation: booleanNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const approveCollection = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/collection/DestroyCollectionSlideover.vue b/resources/js/components/slideovers/collection/DestroyCollectionSlideover.vue
index 5b6e627..9b06c93 100644
--- a/resources/js/components/slideovers/collection/DestroyCollectionSlideover.vue
+++ b/resources/js/components/slideovers/collection/DestroyCollectionSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="destroyCollection"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -86,9 +87,18 @@ const validation = yup.object({
     skipValidation: booleanNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const destroyCollection = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/collection/MutateCollectionSlideover.vue b/resources/js/components/slideovers/collection/MutateCollectionSlideover.vue
index 11e9f39..645a286 100644
--- a/resources/js/components/slideovers/collection/MutateCollectionSlideover.vue
+++ b/resources/js/components/slideovers/collection/MutateCollectionSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="mutateCollection"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -218,9 +219,18 @@ const validation = yup.object({
     skipValidation: booleanNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const mutateCollection = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/collection/UnapproveCollectionSlideover.vue b/resources/js/components/slideovers/collection/UnapproveCollectionSlideover.vue
index 001c1f7..f490cfc 100644
--- a/resources/js/components/slideovers/collection/UnapproveCollectionSlideover.vue
+++ b/resources/js/components/slideovers/collection/UnapproveCollectionSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="unapproveCollection"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -101,9 +102,18 @@ const validation = yup.object({
     skipValidation: booleanNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const unapproveCollection = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/common/FreezeSlideover.vue b/resources/js/components/slideovers/common/FreezeSlideover.vue
index 345ea99..ef692ef 100644
--- a/resources/js/components/slideovers/common/FreezeSlideover.vue
+++ b/resources/js/components/slideovers/common/FreezeSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="freeze"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -156,9 +157,18 @@ const validation = yup.object({
     skipValidation: booleanNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const freeze = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     const freezeTypeText = freezeType.value.charAt(0) + freezeType.value.slice(1).toLowerCase();
     try {
diff --git a/resources/js/components/slideovers/common/ThawSlideover.vue b/resources/js/components/slideovers/common/ThawSlideover.vue
index b28438a..72c2000 100644
--- a/resources/js/components/slideovers/common/ThawSlideover.vue
+++ b/resources/js/components/slideovers/common/ThawSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="thaw"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -142,9 +143,18 @@ const validation = yup.object({
     skipValidation: booleanNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const thaw = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     const freezeTypeText = freezeType.value.charAt(0) + freezeType.value.slice(1).toLowerCase();
     try {
diff --git a/resources/js/components/slideovers/common/TransferBalanceSlideover.vue b/resources/js/components/slideovers/common/TransferBalanceSlideover.vue
index b6eb6c1..301ec6c 100644
--- a/resources/js/components/slideovers/common/TransferBalanceSlideover.vue
+++ b/resources/js/components/slideovers/common/TransferBalanceSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="transfer"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -101,9 +102,18 @@ const validation = yup.object({
     skipValidation: booleanNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const transfer = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/fueltank/AccountsFuelTankSlideover.vue b/resources/js/components/slideovers/fueltank/AccountsFuelTankSlideover.vue
index f3bc063..7875834 100644
--- a/resources/js/components/slideovers/fueltank/AccountsFuelTankSlideover.vue
+++ b/resources/js/components/slideovers/fueltank/AccountsFuelTankSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="formAction"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -237,9 +238,18 @@ const formAction = () => {
     }
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const addAccounts = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     const currentAction = actions.value.find((a: any) => a.value === actionType.value);
     if (!currentAction) return;
@@ -278,7 +288,13 @@ const addAccounts = async () => {
 
 const removeAccounts = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        snackbar.error({
+            title: 'Form validation',
+            text: 'Please verify that all the fields are valid',
+        });
+        return;
+    }
 
     const currentAction = actions.value.find((a: any) => a.value === actionType.value);
     if (!currentAction) return;
diff --git a/resources/js/components/slideovers/fueltank/ConsumptionFuelTankSlideover.vue b/resources/js/components/slideovers/fueltank/ConsumptionFuelTankSlideover.vue
index f1d21bd..0f54bd4 100644
--- a/resources/js/components/slideovers/fueltank/ConsumptionFuelTankSlideover.vue
+++ b/resources/js/components/slideovers/fueltank/ConsumptionFuelTankSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="setConsumption"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -118,9 +119,18 @@ const validation = yup.object({
     idempotencyKey: stringNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const setConsumption = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/fueltank/DestroyFuelTankSlideover.vue b/resources/js/components/slideovers/fueltank/DestroyFuelTankSlideover.vue
index fc47867..af1187a 100644
--- a/resources/js/components/slideovers/fueltank/DestroyFuelTankSlideover.vue
+++ b/resources/js/components/slideovers/fueltank/DestroyFuelTankSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="destroyFuelTank"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -76,9 +77,18 @@ const validation = yup.object({
     idempotencyKey: stringNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const destroyFuelTank = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid || !tankId.value) return;
+    if (!formRef.value?.getMeta().valid || !tankId.value) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/fueltank/DispatchFuelTankSlideover.vue b/resources/js/components/slideovers/fueltank/DispatchFuelTankSlideover.vue
index 2d07367..52030e9 100644
--- a/resources/js/components/slideovers/fueltank/DispatchFuelTankSlideover.vue
+++ b/resources/js/components/slideovers/fueltank/DispatchFuelTankSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="dispatchFuelTank"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -194,9 +195,18 @@ const removeVariable = (index: number) => {
     variables.value.splice(index, 1);
 };
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const dispatchFuelTank = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/fueltank/FreezeFuelTankSlideover.vue b/resources/js/components/slideovers/fueltank/FreezeFuelTankSlideover.vue
index 52ad10e..0f66def 100644
--- a/resources/js/components/slideovers/fueltank/FreezeFuelTankSlideover.vue
+++ b/resources/js/components/slideovers/fueltank/FreezeFuelTankSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="freezeFuelTank"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -102,9 +103,18 @@ const validation = yup.object({
     idempotencyKey: stringNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const freezeFuelTank = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue b/resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue
index 68c9133..58732a7 100644
--- a/resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue
+++ b/resources/js/components/slideovers/fueltank/MutateFuelTankSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="mutateFuelTank"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -194,9 +195,18 @@ const validation = yup.object({
     idempotencyKey: stringNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const mutateFuelTank = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/marketplace/CancelListingSlideover.vue b/resources/js/components/slideovers/marketplace/CancelListingSlideover.vue
index 4734ebd..e58449c 100644
--- a/resources/js/components/slideovers/marketplace/CancelListingSlideover.vue
+++ b/resources/js/components/slideovers/marketplace/CancelListingSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="cancelListing"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -76,9 +77,18 @@ const validation = yup.object({
     idempotencyKey: stringNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const cancelListing = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/marketplace/FillListingSlideover.vue b/resources/js/components/slideovers/marketplace/FillListingSlideover.vue
index 4c094b6..e98919c 100644
--- a/resources/js/components/slideovers/marketplace/FillListingSlideover.vue
+++ b/resources/js/components/slideovers/marketplace/FillListingSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="fillListing"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -86,9 +87,18 @@ const validation = yup.object({
     idempotencyKey: stringNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const fillListing = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/marketplace/FinalizeAuctionSlideover.vue b/resources/js/components/slideovers/marketplace/FinalizeAuctionSlideover.vue
index 016342b..300c884 100644
--- a/resources/js/components/slideovers/marketplace/FinalizeAuctionSlideover.vue
+++ b/resources/js/components/slideovers/marketplace/FinalizeAuctionSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="finalizeAuction"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -76,9 +77,18 @@ const validation = yup.object({
     idempotencyKey: stringNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const finalizeAuction = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/marketplace/PlaceBidSlideover.vue b/resources/js/components/slideovers/marketplace/PlaceBidSlideover.vue
index e4e4e3a..3d70091 100644
--- a/resources/js/components/slideovers/marketplace/PlaceBidSlideover.vue
+++ b/resources/js/components/slideovers/marketplace/PlaceBidSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="placeBid"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -91,9 +92,18 @@ const validation = yup.object({
     idempotencyKey: stringNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const placeBid = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/token/ApproveTokenSlideover.vue b/resources/js/components/slideovers/token/ApproveTokenSlideover.vue
index 029ec1c..cc31b5c 100644
--- a/resources/js/components/slideovers/token/ApproveTokenSlideover.vue
+++ b/resources/js/components/slideovers/token/ApproveTokenSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="approveToken"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -145,9 +146,18 @@ const validation = yup.object({
     skipValidation: booleanNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const approveToken = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/token/BurnTokenSlideover.vue b/resources/js/components/slideovers/token/BurnTokenSlideover.vue
index cc86d8d..41b51b4 100644
--- a/resources/js/components/slideovers/token/BurnTokenSlideover.vue
+++ b/resources/js/components/slideovers/token/BurnTokenSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="burnToken"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -133,9 +134,18 @@ const validation = yup.object({
     skipValidation: booleanNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const burnToken = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/token/MintTokenSlideover.vue b/resources/js/components/slideovers/token/MintTokenSlideover.vue
index 8e312cc..c15f0a2 100644
--- a/resources/js/components/slideovers/token/MintTokenSlideover.vue
+++ b/resources/js/components/slideovers/token/MintTokenSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="mintToken"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -134,9 +135,18 @@ const validation = yup.object({
     skipValidation: booleanNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const mintToken = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/token/MutateTokenSlideover.vue b/resources/js/components/slideovers/token/MutateTokenSlideover.vue
index d4af574..1715b28 100644
--- a/resources/js/components/slideovers/token/MutateTokenSlideover.vue
+++ b/resources/js/components/slideovers/token/MutateTokenSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="mutateToken"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -158,9 +159,18 @@ const validation = yup.object({
     skipValidation: booleanNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const mutateToken = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/token/TransferTokenSlideover.vue b/resources/js/components/slideovers/token/TransferTokenSlideover.vue
index 5d15a2c..ccc6ba3 100644
--- a/resources/js/components/slideovers/token/TransferTokenSlideover.vue
+++ b/resources/js/components/slideovers/token/TransferTokenSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="transferToken"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -169,9 +170,18 @@ const validation = yup.object({
     skipValidation: booleanNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const transferToken = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;
diff --git a/resources/js/components/slideovers/token/UnapproveTokenSlideover.vue b/resources/js/components/slideovers/token/UnapproveTokenSlideover.vue
index 04558e5..8659362 100644
--- a/resources/js/components/slideovers/token/UnapproveTokenSlideover.vue
+++ b/resources/js/components/slideovers/token/UnapproveTokenSlideover.vue
@@ -3,6 +3,7 @@
         ref="formRef"
         class="flex h-full flex-col divide-y divide-light-stroke dark:divide-dark-stroke bg-light-surface-primary dark:bg-dark-surface-primary shadow-xl"
         :validation-schema="validation"
+        @invalid-submit="invalidSubmit"
         @submit="unapproveToken"
     >
         <h3 class="text-xl font-semibold px-4 sm:px-6 py-4 text-light-content-strong dark:text-dark-content-strong">
@@ -117,9 +118,18 @@ const validation = yup.object({
     skipValidation: booleanNotRequiredSchema,
 });
 
+const invalidSubmit = () => {
+    snackbar.error({
+        title: 'Form validation',
+        text: 'Please verify that all the fields are valid',
+    });
+};
+
 const unapproveToken = async () => {
     await formRef.value?.validate();
-    if (!formRef.value?.getMeta().valid) return;
+    if (!formRef.value?.getMeta().valid) {
+        return;
+    }
 
     try {
         isLoading.value = true;