VeeValidation 始终返回 true

Question

I just start using vee-validate in my project. I have following code in my component where is simple form group with validation

    <ValidationObserver ref="observer" v-slot="{ invalid }">
        <b-form @submit.prevent="onSubmit" novalidate>
            <b-form-group label="Amount">
                <ValidationProvider name="amount" rules="required|min_value:0" v-slot="{ errors }">
                    <b-form-input
                        :state="errors.length == 0"
                        v-model="form.amount"
                        type="text"
                        placeholder="Amount"
                    ></b-form-input>
                    <b-form-invalid-feedback :state="errors.length == 0">{{errors.join('. ')}}</b-form-invalid-feedback>
                </ValidationProvider>
            </b-form-group>
        </b-form>
    </ValidationObserver>

I have imported ValidationObserver and ValidationProvider in component but validation behave weird.

On picture you can see default behavior. It is green from start and doesn't matter what I write or if I submit as empty. It is always green.

Submit method looks like this:

       async onSubmit() {
            let validate = await this.$refs.observer.validate();
            console.log('VALID: ', validate)
        },

and gives me always true.

I am using nuxt 2.9.x and vee-validate 3.1.x

Answer 1

Using vee-validate, you have to explicitly extend vee-validate with any rules you want. There is a specific example here in the documentation that covers how to do that:

import { extend } from 'vee-validate';
import { required, min_value } from 'vee-validate/dist/rules';

extend('min_value', min_value);
extend('required', required);

If you don't do that, your rules are just ignored and the form is always validated as being valid.

Also if you are using nuxt, see the notes here