CODEWITHSUNDEEP
vue.jsvuejs2vue-componentbootstrap-vuevee-validate
bauhausweb
bauhausweb

Reputation: 137

How to validate input from BootstrapVue form with VeeValidate?

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!

Upvotes: 0

Views: 2448

Answers (1)

Jesper
Jesper

Reputation: 3834

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.

Upvotes: 2

Related Questions