Does anyone know how to make validation (with vee-validate) on each chips item?
I have this piece of code:
<v-select
class="elevation-0 mt-border-bottom"
v-model="PhoneNumber"
label="Add phone number"
chips
tags
solo
prepend-icon="phone"
clearable
:error-messages="errors.collect('Phone Number')"
v-validate="'required|numeric'"
data-vv-name="Phone Number"
required
>
<template slot="selection" slot-scope="data">
<v-chip
close
outline
dark
@input="remove(data.item)"
:selected="data.selected"
>
<strong>{{ data.item }}</strong>
</v-chip>
</template>
</v-select>
<script>
export default {
data () {
return {
PhoneNumber: []
}
},
methods: {
async submitNewNumber () {
await this.$validator.validateAll().then((isValid) => {
if (isValid) {
console.log('submitted')
} else {
return false
}
})
}
}
}
</script>
And now the validation is happening on the entire Phone Number input only. I would like to know how I can make it work on each chip, inside this input setting the min_value to 9 and max_value to 15.
Vuetify - Chips usage: https://vuetifyjs.com/en/components/chips
Vuetify - Vee-validate: https://vuetifyjs.com/en/components/forms#example-vee-validate
Vee-validate - validation rules: https://baianat.github.io/vee-validate/guide/rules.html
Thank you
It seems there isn't build in validation functionality for v-chip
. So I am using the default validation(not vee-validate). In that way you can see the results of v-select. You can then loop through the results and validate each value.
inputRules = [
(v: any) => {
if (!v || v.length < 1)
return 'Input is required';
else if (v.length > 0) {
for (let i = 0; i < v.length; i++) {
if (v[i].length > 9)
return 'Invalid Number';
}
}
else return true;
}
];
<v-form ref="form" v-model="valid" lazy-validation>
<v-select
class="elevation-0 mt-border-bottom"
v-model="phoneNumber"
label="Add phone number"
chips
tags
solo
prepend-icon="phone"
clearable
data-vv-name="Phone Number"
required
:rules="inputRules"
>
<template slot="selection" slot-scope="data">
<v-chip
close
outline
dark
@input="remove(data.item)"
:selected="data.selected"
>
<strong>{{ data.item }}</strong>
</v-chip>
</template>
</v-select>
<v-btn @click.native="submitNewNumber">Test</v-btn>
</v-form>