Playing with vuetify in this project I came across v-text-field and the validation.
The documentation shows only very little information in that regard and if you need more conditional validation, how would you do that?
Say you have v-text-field in your template
|
1 |
<v-text-field counter :rules="rules"></v-text-field> |
and you’d like the fail condition to trigger when the field has at least 1 character entered, but not 0, and the field’s content’s length should be at least 14 characters long
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
data() { return { rules: [ v => { if (v) { if ((v.length !== 0) && (v.length < 14)) { return 'field must be at least 14 characters long' } else { return true } } else { return true } } ] } } |
Returning true means “it’s all good – show no error”, returning false colors the field red.
So here you can have your custom, nested conditions if you need.
The validation function should return a boolean or string.
When it returns a string it’s treated like “false” aka an error.