Enhance Error Handling and Validation Feedback in Form Components

- Updated error handling in `EditSubmissionModal.vue`, `OpenCompleteForm.vue`, and `OpenForm.vue` to utilize a new `formValidationError` method for improved user feedback on validation issues.
- Introduced `formValidationError` function in `useAlert.js` to format and display validation errors more effectively, including detailed error messages for multiple fields.
- These changes aim to provide clearer and more actionable feedback to users when form submissions fail due to validation errors, enhancing the overall user experience.

client/components/open/components/EditSubmissionModal.vue

@@ -61,6 +61,9 @@ const updateForm = (form, onFailure) => {
     })
     .catch((error) => {
       console.error(error)
+      if (error?.data) {
+        useAlert().formValidationError(error.data)
+      }
       loading.value = false
       onFailure()
     })

client/components/open/forms/OpenCompleteForm.vue

@@ -340,8 +340,8 @@ export default {
         }
       }).catch((error) => {
         console.error(error)
-        if (error.response && error.data && error.data.message) {
-          useAlert().error(error.data.message)
+        if (error.response && error.data) {
+          useAlert().formValidationError(error.data)
         }
         this.loading = false
         onFailure()

client/components/open/forms/OpenForm.vue

@@ -456,7 +456,11 @@ export default {
         opnFetch('/forms/' + this.form.slug + '/submissions/' + this.form.submission_id).then((data) => {
           return {submission_id: this.form.submission_id, id: this.form.submission_id, ...data.data}
         }).catch((error) => {
-          useAlert().error(error?.data?.message || 'Something went wrong')
+          if (error?.data?.errors) {
+            useAlert().formValidationError(error.data)
+          } else {
+            useAlert().error(error?.data?.message || 'Something went wrong')
+          }
           return null
         })
       )
@@ -628,8 +632,8 @@ export default {
     },
     handleValidationError(error) {
       console.error(error)
-      if (error?.data?.message) {
-        useAlert().error(error.data.message)
+      if (error?.data) {
+        useAlert().formValidationError(error.data)
       }
       this.dataForm.busy = false
     },

client/composables/useAlert.js

@@ -54,6 +54,47 @@ export function useAlert () {
     })
   }
 
+  function formValidationError(error, autoClose = 10000, options = {}) {
+    if (!error || !error.errors) {
+      return error(error.message || 'An unknown validation error occurred', autoClose, options)
+    }
+
+    // Count total errors
+    const errorCount = Object.keys(error.errors).length
+
+    // Format error messages as HTML
+    let description = ''
+    if (Object.keys(error.errors).length > 0) {
+      const errorLines = Object.entries(error.errors)
+        .map(([field, messages]) => {
+          // Format each message
+          const formattedMessages = messages.map(message => {
+            return `<li>${message}</li>`
+          });
+          
+          return formattedMessages.join('')
+        })
+        .join('')
+      
+      description = `<ul class="list-disc pl-4">${errorLines}</ul>`
+    }
+
+    // Add count of errors to the title
+    const title = options.title || (errorCount > 1 
+      ? `Validation Error (${errorCount} fields)` 
+      : 'Validation Error')
+
+    return useToast().add({
+      icon: 'i-heroicons-x-circle',
+      title,
+      description,
+      color: 'red',
+      timeout: autoClose,
+      html: true,
+      ...options
+    })
+  }
+
   function remove (id) {
     useToast().remove(id)
   }
@@ -63,6 +104,7 @@ export function useAlert () {
     error,
     warning,
     confirm,
-    remove
+    remove,
+    formValidationError
   }
 }