I recently integrated vee-validate into my project and encountered an issue with the validation behavior. Below is the code snippet from my component with a simple form group:
<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>
Despite importing ValidationObserver and ValidationProvider in the component, the validation does not work as expected.
https://i.sstatic.net/X3bnt.png
The attached image shows the default behavior of the validation. It always appears green, regardless of the input or submission status.
The submit method is defined as follows:
async onSubmit() {
let validate = await this.$refs.observer.validate();
console.log('VALID: ', validate)
},
And it consistently returns true.
I am utilizing nuxt 2.9.x along with vee-validate 3.1.x for this implementation.