ahoi's avatar
Level 5

Validating with vee-validate fails: rules "required: false, integer: true" validates "k123" with no error

Hi there,

I am using vee-validate to validate my forms.

If I got a rule like required: false, integer: true, a form input like "k123" is being validated without any error.

I added these rules:

import * as rules from 'vee-validate/dist/rules';

[...]

// Add rules
Object.keys(rules).forEach(rule => {
    extend(rule, rules[rule]);
});

Later I added this component:

<template>
    <ValidationProvider :rules="{ required: false, integer: true }" v-slot="{ errors }" v-bind="$attrs">
        {{required}}
        <b-input
                :id="'form-'+name"
                :name="'form-'+name"
                :value="value"
                type="number"
                :state="errors[0] ? false : null"
                v-model="innerValue"
                v-bind="$attrs" />
        {{innerValue}}{{errors}}
    </ValidationProvider>
</template>
<script>

import {ValidationProvider} from 'vee-validate';

export default {
    name: 'Integer',

    props: {
        name: String,
        value: [Number, String],
            
    },

    components: {
        ValidationProvider
    },

    data: () => ({
        innerValue: ''
    }),

    watch: {
        innerValue (newVal) {
            this.$emit('input', newVal);
        },

        value (newVal) {
            this.innerValue = newVal;
        }
    },

    created () {
        if (this.value) {
            this.innerValue = this.value;
        }
    }
}
</script>

Input K123 shows error as "K" it is not an integer.

Once required is set to true it is working as expected. If required is set to false the integer is not validated correctly and there is no error shown.

0 likes
3 replies
ahoi's avatar
ahoi
OP
Best Answer
Level 5

Hi @bobbybouwmann and thank you for your reply.

I found the problem here:

        <b-input
                :id="'form-'+name"
                :name="'form-'+name"
                :value="value"
                type="number"
                :state="errors[0] ? false : null"
                v-model="innerValue"
                v-bind="$attrs" />

I found out that vee-validates tries to use the attributes - in this case type="number". If I remove this attribute, the validation works as expected.

Please or to participate in this conversation.