1

I want to validate a multiple select filed (v-select) with vee-validate validationProvider. For single select option it is working fine. but when i am trying for the multiple select it is not working.

How can i do this?

I have tried:

<ValidationProvider name="types" vid="types">
<b-form-group
    class="row"
    label-cols-sm="4"
    label-for="types"
    slot-scope="{ valid, errors }"
    >
    <template v-slot:label>
    Types <span class="text-danger">*</span>
    </template>

    <v-select
        id="hat_days"
        v-model="profile.types"
        :reduce="op => op.value"
        multiple
        :options="TypeList"
        label="text"
        :state="errors[0] ? false : (valid ? true : null)"
        :placeholder="Select Type"
        required
    >
    </v-select>
    <div class="invalid-feedback">
        {{ errors[0] }}
    </div>
</b-form-group>

Also tried:

<ValidationProvider name="types" vid="types" rules='required|min:1'> // Or rules='required|min_value:1'
<b-form-group
    class="row"
    label-cols-sm="4"
    label-for="types"
    slot-scope="{ valid, errors }"
    >
    <template v-slot:label>
    Types <span class="text-danger">*</span>
    </template>

    <v-select
        id="hat_days"
        v-model="profile.types"
        :reduce="op => op.value"
        multiple
        :options="TypeList"
        label="text"
        :state="errors[0] ? false : (valid ? true : null)"
        :placeholder="Select Type"
        required
    >
    </v-select>
    <div class="invalid-feedback">
        {{ errors[0] }}
    </div>
</b-form-group>

0 Answers0