Vue-multiselect: 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);
}

[MrFFC0CB]

@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.