How to validate input from BootstrapVue form with VeeValidate?

Question

I have a form which is built with BootstrapVue. In order to validate the form input, I came across VeeValidate.

The select input is part of a longer form and currently looks like this:

<form action="">
...
  <b-form-select size="sm" v-model="selected" class="mb-2 form-group">
    <option :value="null" disabled>Payments per Year</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
    <option value="12">12</option>
  </b-form-select>
...
</form>

I would like to validate this input and display on page load a validation error to indicate to the user that he needs to make a select input ("1..2..4..6..12"). The "Payments per Year" placeholder should display invalid.

When reading the VeeValidate documentation, it says that I need a separate component. Example:

<ValidationProvider rules="even" v-slot="{ errors }">
    <input v-model="value" type="number" placeholder="type something">
    <span>{{ errors[0] }}</span>
</ValidationProvider>

But I do use the select input in the BootstrapVue component already. How am I supposed to move on from here?

Can I merge those two components somehow?

Thanks for your insights and help!

Jesper · Accepted Answer · 2019-12-18 11:58:27Z

2

You have to wrap every input you want to validate, in a <ValidationProvider, just like the following for your code:

<ValidationProvider rules="even" v-slot="{ errors }">
    <b-form-select size="sm" v-model="selected" class="mb-2 form-group">
        <option :value="null" disabled>Payments per Year</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="4">4</option>
        <option value="6">6</option>
        <option value="12">12</option>
    </b-form-select>
    <span>{{ errors[0] }}</span>
</ValidationProvider>

Optionally if you want to use the <ValidationObserver> later on, you have to wrap that around all your <ValidationProvider> tags.

answered Dec 18, 2019 at 11:58

Jesper

3,8422 gold badges18 silver badges24 bronze badges

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

2 Comments

bauhausweb Over a year ago

Thanks a lot @Jesper for pointing me into the right direction! Do you know what this console log may mean? "Error: No such validator 'even' exists"

Jesper Over a year ago

You're welcome, remember to mark the answer as correct, if it helped you out enough

Collectives™ on Stack Overflow

How to validate input from BootstrapVue form with VeeValidate?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related