exchange-2.0/resources/assets/vue/components/general/forms/ValidationErrorComponent.vue

<template>
    <div v-if="validator.$error" class="text-danger fs-10">
        <small class="bold" v-for="(object, param) in validator.$params">
            <span class="btn-block" v-if="object && object.type === 'required'">{{errorMessages[param]}}</span>
            <span class="btn-block" v-if="object && object.type === 'maxLength'">{{errorMessages[param]}} {{object.max}} characters</span>
            <span class="btn-block" v-if="object && object.type === 'minLength'">{{errorMessages[param]}} {{object.min}} characters</span>
            <span class="btn-block" v-if="object && object.type === 'sameAs'">{{errorMessages[param]}} {{object.eq}} field</span>
            <span class="btn-block" v-if="object && object.type === 'maxValue'">{{errorMessages[param]}} {{object.max}}</span>
            <span class="btn-block" v-if="object && object.type === 'alphaNum'">{{errorMessages[param]}}</span>
            <span class="btn-block" v-if="['fiveDigits'].includes(param)">
                {{ errorMessages[param] }}
            </span>
            <span class="btn-block" v-if="['allowZeroOrFiveDigits'].includes(param)">
                {{ errorMessages[param] }}
            </span>
        </small>
    </div>
</template>

<script>
    export default {
        props: {
            validator: {
                required: true
            },
        },
        data(){
            return {
                errorMessages:{
                    required: 'this field is required',
                    email: 'enter a valid email address',
                    maxLength: 'this field must have at most',
                    minLength: 'this field must have at least',
                    sameAs: 'this field must match the',
                    maxValue: 'this value must not exceeds',
                    alphaNum: 'this value must be alphanumeric',
                    fiveDigits: 'this value must be exactly 5 digits',
                    allowZeroOrFiveDigits: 'this value must be exactly 5 digits or 0',
                    // notZero: 'this value cannot be zero',
                },
            }
        },
        methods: {

        }
    }
</script>