From f1052409c0945d076df1345d0294e320c7da9250 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Fri, 25 Jul 2025 12:29:43 +0200
Subject: [PATCH] make validation smart, show invalid after first onBlur

---
 .../components/GddSend/TransactionForm.vue    |  2 +-
 .../src/components/Inputs/ValidatedInput.vue  | 40 +++++++++++++++++--
 2 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/GddSend/TransactionForm.vue b/frontend/src/components/GddSend/TransactionForm.vue
index 5ce9b6e7f..4bf9d7229 100644
--- a/frontend/src/components/GddSend/TransactionForm.vue
+++ b/frontend/src/components/GddSend/TransactionForm.vue
@@ -178,7 +178,7 @@ const validationSchema = computed(() => {
     amount: number()
       .required()
       .transform((value, originalValue) => {
-        if (typeof originalValue === 'string' && originalValue !== '') {
+        if (typeof originalValue === 'string') {
           return Number(originalValue.replace(',', '.'))
         }
         return value
diff --git a/frontend/src/components/Inputs/ValidatedInput.vue b/frontend/src/components/Inputs/ValidatedInput.vue
index 04c346292..8f4601124 100644
--- a/frontend/src/components/Inputs/ValidatedInput.vue
+++ b/frontend/src/components/Inputs/ValidatedInput.vue
@@ -9,7 +9,8 @@
     :required="!isOptional"
     :label="label"
     :name="name"
-    :state="valid"
+    :state="smartValidState"
+    @blur="afterFirstInput = true"
     @update:modelValue="updateValue"
   >
     <BFormInvalidFeedback v-if="errorMessage">
@@ -19,7 +20,7 @@
 </template>
 
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed, ref, watch, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import LabeledInput from './LabeledInput'
 import { translateYupErrorString } from '@/validationSchemas'
@@ -42,9 +43,29 @@ const props = defineProps({
 
 const { t } = useI18n()
 
-const model = ref(props.modelValue)
+const model = ref(props.modelValue !== 0 ? props.modelValue : '')
+// change to true after user leave the input field the first time
+// prevent showing errors on form init
+const afterFirstInput = ref(false)
 
 const valid = computed(() => props.rules.isValidSync(props.modelValue))
+// smartValidState controls the visual validation feedback for the input field.
+// The goal is to avoid showing red (invalid) borders too early, creating a smoother UX:
+//
+// - On initial form open, the field is neutral (no validation state shown).
+// - If the user enters a value that passes validation, we show a green (valid) state immediately.
+// - We only show red (invalid) feedback *after* the user has blurred the field for the first time.
+//
+// Before first blur:
+//   - show green if valid, otherwise neutral (null)
+// After first blur:
+//   - show true or false according to the validation result
+const smartValidState = computed(() => {
+  if (afterFirstInput.value) {
+    return valid.value
+  }
+  return valid.value ? true : null
+})
 const errorMessage = computed(() => {
   if (props.modelValue === undefined || props.modelValue === '' || props.modelValue === null) {
     return undefined
@@ -79,4 +100,17 @@ const minValue = computed(() => getTestParameter('min'))
 const maxValue = computed(() => getTestParameter('max'))
 const resetValue = computed(() => schemaDescription.value.default)
 const isOptional = computed(() => schemaDescription.value.optional)
+
+// reset on mount
+onMounted(() => {
+  afterFirstInput.value = false
+})
 </script>
+<!-- disable animation on invalid input -->
+<style>
+.form-control {
+  transition: none !important;
+  transform: none !important;
+  animation: none !important;
+}
+</style>