Validation(VeeValidate) in multiselect is not working

[rd1571]

The validation is not working if the multiselect is empty, veevalidate should work. Below is the link for jsfiddle that i have created.

https://jsfiddle.net/rd1571/8fdzxysv/11/

[shentao]

Can’t really help you – I’m not using vee-validate and I don’t know how it works with custom components. I usually opted for https://vuelidate.js.org/

[rd1571]

@shentao When implementing the vuelidate on my project.. I used cdn url and not using the module. Do i need to add both urls?

vuelidate.min.js validators.min.js

then use global ?

Vue.use(window.vuelidate.default) const { required, minLength } = window.validators

[shentao]

I think so. See the example: https://jsfiddle.net/Frizi/b5v4faqf/

[rd1571]

@shentao I have tried to implement vuelidate validation on VueMultiselect. The validation is still not working when the form is submit.

[kushalbacancy]

Hello @rd1571 As I just integrate this package with Vee-validate, It working for me. I not able to create a fiddle for that, But I believe it will work.

[rd1571]

@kushalbacancy can you show you code?

[kushalbacancy]

I am putting my working code, So you can change according to your requirement.

<multiselect v-model="roof_setback_level"
   id="roof_setback_level"
   label="floor_name_number"
   track-by="id"
   v-validate="'required'"
   name="roof_setback_level"
   :class="errors.first('roof_setback_level') ? 'input-error': ''"
   placeholder="Type to search"
   open-direction="bottom"
   :options="floors"
   :multiple="true"
   :searchable="true"
   :internal-search="false"
   :clear-on-select="false"
   :close-on-select="false"
   :options-limit="300"
   :limit="5"
   :limit-text="limitText"
   :max-height="600"
   :show-no-results="false"
   :hide-selected="true">
   <template slot="tag" slot-scope="{ option, remove }">
      <span class="custom__tag">
      <span>{{ option.floor_name_number }}</span>
      <span class="custom__remove" @click="remove(option)">❌</span>
      </span>
   </template>
   <template slot="clear" slot-scope="props">
      <div class="multiselect__clear" v-if="roof_setback_level && roof_setback_level.length" @mousedown.prevent.stop="clearAll(props.search)"></div>
   </template>
   <span slot="noResult">Oops! No elements found. Consider changing the search query.</span>
</multiselect>

and CSS for error class is

.input-error{
  border : 1px solid red;
}

and submit the event call will be:-

submit(){
  this.$validator.validate('roof_setback_level', this.roof_setback_level);
}

[hordii-ztoe]

@kushalbacancy Possible to add error message?

[kushalbacancy]

@MrFFC0CB Yes you can add the error message as well.

<span v-if="errors.first('feild_name')" > This feild is required </span>

You can put this span under the input element.

Please refer the below link. https://jsfiddle.net/kushalbacancy/e6wg32hm/

[rd1571]

@kushalbacancy have you tried inserting those field inside form tag?

@shentao I still haven't solve this issue. maybe you could help me on this ?

[dcabanales]

Hi, I'm trying to use ValidationProvider/Validation Observer from vee-validate with vue-multiselect, but it doesn't work... Do you any idea how to?

[WofWca]

Look at the console in your JSFiddle: Failed to resolve directive: validate. Also Property or method "motherboardValue" is not defined on the instance. The directive was removed in the third major version.

[devzom]

@dcabanales

Hi, I'm trying to use ValidationProvider/Validation Observer from vee-validate with vue-multiselect, but it doesn't work... Do you any idea how to?

have You found a solution?

I fixed old version

• VeeValidate 2.2.15 with VueMultiselect validation

[BrayamValero]

I know this is an old issue, however, I'd like to give a solution that worked for me.

According to the migration guide this directive is removed in v3.x :

Fields that had the v-validate directive needs to be wrapped by ValidationProvider component now, and they need to use v-model to properly tag themselves for vee-validate.

Old way

<input type="text" name="field" v-validate="'required'">
<span>{{ errors.first('field') }}</span>

New way

<ValidationProvider name="field" rules="required" v-slot="{ errors }">
  <input type="text" v-model="value">
  <span>{{ errors[0] }}</span>
</ValidationProvider>

In my case, I'm working with Laravel / Vue, so, I use <validation-provider> tag instead of <ValidationProvider> this is my code, it's perfectly working with Vue Multiselect.

<validation-provider name="type" rules="required" v-slot="{ errors, ariaMsg }">
   <multiselect
        name="type"
        label="name"
        track-by="name"
        placeholder="Select"
        v-model="selected.type"
        :options="options.type"
        :searchable="true"
        :show-labels="false"
        :allow-empty="false"
        :close-on-select="true"
    >
    <span slot="noResult"
        >No results...</span
    >
  </multiselect>
  <!-- Error Message -->
  <small
      v-bind="ariaMsg"
  >
      {{ errors[0] }}
  </small>
</validation-provider>

I hope it helps.