CODEWITHSUNDEEP
vue.jsvuetify.js
Fabio Ebner
Fabio Ebner

Reputation: 2783

Vuetifyjs form validation with mask

I create one v-form in my component, inside this v-form I put a v-text-field with a mask and a rule to not null

<v-text-field mask="###.###" :rule="[v => !!v || 'Required']"> ... </v-text-field>

but if my user type 22, when I try to validate the form I fot valid (because the text are not null, in my rules) but he don't match with my mask.. how can I get both validations? tks

Upvotes: 1

Views: 1614

Answers (1)

Đorđe Zeljić
Đorđe Zeljić

Reputation: 1825

You can use regex to check value.

:rule="[v => !!v || 'Required', v => /^\d{3}\.\d{3}$/.test(v) || 'Invalid format']"

Edit

Interesting, . (dot) is not part of value, so better answer would be:

:rule="[v => !!v || 'Required', v => /\d{6}/.test(v) || 'Invalid format']"

Live example: CodePen

Upvotes: 1

Related Questions