vee-validate not working with bootstrap-vue

Question

I'm trying to use vee-validate for form validation with bootstrap-vue, and cannot get anything to work. Basically, I want to do:

<b-form-input v-model="emailText"
              placeholder="Enter email"
              v-validate="'required|email'"
              name="email"
              type="text">
    <b-row>
        <span>{{ errors.first('email') }}</span>
    </b-row>
</b-form-input>

But I don't see anything when I type a non-email address in the field. However, if I change:

b-form-input to input

then everything works. Is there a workaround for this behavior? Any help would be greatly appreciated.

Answer 1

You have put the error messages inside the <b-form-input>, which has no internal slot, so the error messages aren't rendered. If you move them to after the input, it should fix your issue:

<b-form-input v-model="emailText"
              placeholder="Enter email"
              v-validate="'required|email'"
              name="email"
              type="text">
</b-form-input>
<b-row>
    <span>{{ errors.first('email') }}</span>
</b-row>

You can also use Bootstrap-Vue's state and invalid-feedback properties on the <b-form-input> and a surrounding <b-form-group> to display validation errors with a better accessibility. All of this is demonstrated in this codepen