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.

Tomhah · Accepted Answer · 2018-09-29 06:33:50Z

4

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

answered Sep 29, 2018 at 6:33

Tomhah

3862 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vee-validate not working with bootstrap-vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related