trigger validation on hover above submit button

frontend/src/components/Contributions/ContributionForm.vue

@@ -19,6 +19,7 @@
         class="mb-4 bg-248"
         type="date"
         :rules="validationSchema.fields.contributionDate"
+        :disable-smart-valid-state="disableSmartValidState"
         @update:model-value="updateField"
       />
       <div v-if="noOpenCreation" class="p-3" data-test="contribution-message">
@@ -33,6 +34,7 @@
           :placeholder="$t('contribution.yourActivity')"
           :rules="validationSchema.fields.memo"
           textarea="true"
+          :disable-smart-valid-state="disableSmartValidState"
           @update:model-value="updateField"
         />
         <ValidatedInput
@@ -43,6 +45,7 @@
           step="0.01"
           type="number"
           :rules="validationSchema.fields.hours"
+          :disable-smart-valid-state="disableSmartValidState"
           @update:model-value="updateField"
         />
         <LabeledInput
@@ -68,7 +71,7 @@
               {{ $t('form.cancel') }}
             </BButton>
           </BCol>
-          <BCol class="text-end mt-lg-0">
+          <BCol class="text-end mt-lg-0" @mouseover="disableSmartValidState = true">
             <BButton
               block
               type="submit"
@@ -121,6 +124,7 @@ const entityDataToForm = computed(() => ({
 const form = reactive({ ...entityDataToForm.value })
 
 const now = ref(new Date()) // checked every minute, updated if day, month or year changed
+const disableSmartValidState = ref(false)
 
 const isThisMonth = computed(() => {
   const formContributionDate = new Date(form.contributionDate)

frontend/src/components/GddSend/TransactionForm.vue

@@ -63,6 +63,7 @@
                         :placeholder="$t('form.identifier')"
                         :rules="validationSchema.fields.identifier"
                         :disabled="isBalanceEmpty"
+                        :disable-smart-valid-state="disableSmartValidState"
                         @update:model-value="updateField"
                       />
                     </div>
@@ -84,6 +85,7 @@
                       :placeholder="'0.01'"
                       :rules="validationSchema.fields.amount"
                       :disabled="isBalanceEmpty"
+                      :disable-smart-valid-state="disableSmartValidState"
                       @update:model-value="updateField"
                     />
                   </BCol>
@@ -102,6 +104,7 @@
                   :rules="validationSchema.fields.memo"
                   textarea="true"
                   :disabled="isBalanceEmpty"
+                  :disable-smart-valid-state="disableSmartValidState"
                   @update:model-value="updateField"
                 />
               </BCol>
@@ -121,7 +124,13 @@
                   {{ $t('form.reset') }}
                 </BButton>
               </BCol>
-              <BCol cols="12" md="6" lg="6" class="text-lg-end">
+              <BCol
+                cols="12"
+                md="6"
+                lg="6"
+                class="text-lg-end"
+                @mouseover="disableSmartValidState = true"
+              >
                 <BButton block type="submit" variant="gradido" :disabled="formIsInvalid">
                   {{ $t('form.check_now') }}
                 </BButton>
@@ -161,6 +170,7 @@ const props = defineProps({
 
 const entityDataToForm = computed(() => ({ ...props }))
 const form = reactive({ ...entityDataToForm.value })
+const disableSmartValidState = ref(false)
 
 const emit = defineEmits(['set-transaction'])
 

frontend/src/components/Inputs/ValidatedInput.vue

@@ -39,6 +39,10 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  disableSmartValidState: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const { t } = useI18n()
@@ -61,7 +65,7 @@ const valid = computed(() => props.rules.isValidSync(model.value))
 // After first blur:
 //   - show true or false according to the validation result
 const smartValidState = computed(() => {
-  if (afterFirstInput.value) {
+  if (afterFirstInput.value || props.disableSmartValidState) {
     return valid.value
   }
   return valid.value ? true : null