vuetify v-text-field validation if length 0 and length greater than x

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

<v-text-field counter :rules="rules"></v-text-field>

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

  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
          }
        }
      ]
    }
  }

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.

Leave a Reply Cancel reply