How to make the filed required?

[akbarkz]

I didn't notice a way to make multiselect component required. It always allows me to submit empty multiselect where I don't select any options at all. I think it's better to include a prop that would control requiredness.

[PrimozRome]

I think it's better to control this with any-kind of form validation library... Additionally take a look at this example. Shows you how to do this validation that you want > https://vue-multiselect.js.org/#sub-custom-configuration

[shentao]

Thanks @PrimozRome!

[TheAndroidGuy]

@shentao when i add the required attribute to the input field in the html via chrome it works perfectly.

Can you somehow make it possible to add that attribute to the input field?

Here is screenshot.

[adrianoresende]

@shentao I recommend (very) to add props required in input. Makes it easy with submit button and more semantics.

[andreasvirkus]

Please consider reopening this/making this toggleable @shentao 🙏

[shentao]

@adrianoresende except when the input is not searchable. And when it’s a multiselect where the value isn’t stored in the input. You need to use JavaScript to validate it.

[rationalthinker1]

I had to use this method whenever the multiselect is changed.

  updateFieldRequired() {
      this.$nextTick(() => {
        const required = this.required && (this.option == null || (Array.isArray(this.option) && this.option.length == 0) && this.options.length > 0);
        this.$refs.multiselect.$el.querySelector('input').required = required;
      });
    },

[asilverstein]

I had to use this method whenever the multiselect is changed.

  updateFieldRequired() {
      this.$nextTick(() => {
        const required = this.required && (this.option == null || (Array.isArray(this.option) && this.option.length == 0) && this.options.length > 0);
        this.$refs.multiselect.$el.querySelector('input').required = required;
      });
    },

Thanks for this, saved me some time.

[mlwade]

Add this to your v-select component. When a v-select has the 'multiple' attribute, the validation checks an array. An empty array is considered truthy, therefore the validation passes. You need to check the length of v.

:rules="[v => !!v.length] || 'This is a required field!'"

[zlatanMkare]

You can use vee-validate's to validate the Multiselect. Wrap the multiselect in a validation provider

<ValidationProvider v-slot="{ errors }" rules="required">
     <Multiselect></Multiselect>
     <span class="error">{{ errors[0] }}</span>
</ValidationProvider>