How can we stop vuetify 3 v-combobox from adding new items if the validation checks fail?

Question

I have tried using the validation-on, rules props, they are able to validate and give me error messages but the new items are still getting appended to the state. Is there any way to change this behaviour so that every time there is a validation error it don't append the item to the state?

ParentComponent.vue

...
 <MultiSelect
    v-model="form.tags"
    label="Select Tags"
    :items="tags"
    item-title="name"
    item-value="id"
  />
...

MultiselectComponent.vue

<template>
    <v-combobox 
        multiple 
    chips 
        closable-chips 
        clearable 
        :return-object="false"
        variant="outlined"
    />
</template>

What I want

Basically I don't want user to add tags that starts with a number or are all numbers

e.g. 123, 2VueJs, 456890, 68yjkk etc.

Answer 1

Validation is used to show error messages to the user and prevent the form from being submitted. But if you remove invalid values immediately, there is no error message and the values are always going to be valid.

So instead of validation, you can just filter the values coming out of the component. Just replace the v-model with the underlying :modelValue and @update:modelValue and pipe the values through a filter:

<v-combobox
  :model-value="values"
  @update:model-value="values = filterInvalid($event)"
  ...
/>

You can also use the filter on the input of :modelValue to filter any invalid values coming in, depending on if there are preset values and how to deal with them if they are invalid.

Here it is in a snippet:

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = {
  setup(){
    return {
      values: ref([12, '12n','n']),
      filterInvalid: (inputValues) => inputValues.filter(value => typeof value === 'string' && isNaN(value[0]))
    }
  }

}
createApp(app).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main class="pa-8">
    
      <v-combobox
        :model-value="filterInvalid(values)"
        @update:model-value="values = filterInvalid($event)"
        multiple
        chips
        closable-chips
        clearable
        variant="outlined"
      ></v-combobox>
      
      <div>Values: {{values}}</div>
      
      </v-main>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3/dist/vuetify.min.js"></script>

Note however that removing values automatically can feel like a bug to users. You might be better off with the validation approach after all.