Im using Vuetify and trying to get a text-area to validate ONLY if there are more than 200 characters.

I want to ONLY make the field validate if the user has 1 or more characters, but be less than 200 characters IF it is at least 1 character. This filed is not required BUT if they choose to type data into it i want to make sure its is 200 characters or less.

<v-textarea
    v-model="description"
    :counter="200"
    :rules="[v => (v && v.length <= 200) || 'Description must be 200 characters or less']"
    label="Description"
    height="125"
    no-resize
    outline
/>

Im using Vuetify and trying to get a text-area to validate ONLY if there are more than 200 characters.

I want to ONLY make the field validate if the user has 1 or more characters, but be less than 200 characters IF it is at least 1 character. This filed is not required BUT if they choose to type data into it i want to make sure its is 200 characters or less.

<v-textarea
    v-model="description"
    :counter="200"
    :rules="[v => (v && v.length <= 200) || 'Description must be 200 characters or less']"
    label="Description"
    height="125"
    no-resize
    outline
/>

• javascript
• vue.js
• vuejs2
• vue-ponent
• vuetify.js

2 Answers 2

According to this example provided in official docs, i see that you should do something like :

:rules="[v => (v || '' ).length <= 200 || 'Description must be 200 characters or less']"

For shorter strings, I ended using something like this:

min: v => (v || 'aaaa' ).length >= 4 || '4 chars minimum'