Replace own logic to validation-provider.

frontend/src/components/Contributions/ContributionForm.vue

@@ -25,25 +25,27 @@
         :label-no-date-selected="$t('contribution.noDateSelected')"
         required
       ></b-form-datepicker>
-      <label class="mt-3">{{ $t('contribution.activity') }}</label>
-      <b-form-textarea
-        id="contribution-memo"
-        v-model="form.memo"
-        rows="3"
-        max-rows="6"
-        required
-        :minlength="minlength"
-        :maxlength="maxlength"
-      ></b-form-textarea>
-      <div
-        v-show="form.memo.length > 0"
-        class="text-right"
-        :class="form.memo.length < minlength ? 'text-danger' : 'text-success'"
+      <validation-provider
+        :rules="{
+          required: true,
+          min: minlength,
+          max: maxlength,
+        }"
+        :name="$t('form.message')"
+        v-slot="{ errors }"
       >
-        {{ form.memo.length }}
-        <span v-if="form.memo.length < minlength">{{ $t('math.lower') }} {{ minlength }}</span>
-        <span v-else>{{ $t('math.divide') }} {{ maxlength }}</span>
-      </div>
+        <label class="mt-3">{{ $t('contribution.activity') }}</label>
+        <b-form-textarea
+          id="contribution-memo"
+          v-model="form.memo"
+          rows="3"
+          max-rows="6"
+          required
+        ></b-form-textarea>
+        <b-col v-if="errors">
+          <span v-for="error in errors" class="errors" :key="error">{{ error }}</span>
+        </b-col>
+      </validation-provider>
       <label class="mt-3">{{ $t('form.amount') }}</label>
       <b-input-group size="lg" prepend="GDD" append=".00">
         <b-form-input
@@ -90,7 +92,7 @@ export default {
   },
   data() {
     return {
-      minlength: 50,
+      minlength: 5,
       maxlength: 255,
       maximalDate: new Date(),
       form: this.value,