Use package vee validate version 4 with vuetify
It comes with its own components such as
{ Form, Field, ErrorMessage }
They work well when you use them
<template>
<Form @submit="onSubmit">
<Field
name="name"
as="input"
rules="required"
/>
<ErrorMessage name="name" />
<button>Submit</button>
</Form>
</template>
<script>
import { Form, Field, ErrorMessage } from "vee-validate"
export default {
components: {
Form,
Field,
ErrorMessage,
},
methods: {
onSubmit(values) {
alert(JSON.stringify(values, null, 2))
},
},
}
</script>
I use vee validate ruls a , not yeb with general settings Global Validators
Code example
import { localize, setLocale } from '@vee-validate/i18n'
import ar from '@vee-validate/i18n/dist/locale/ar.json'
import en from '@vee-validate/i18n/dist/locale/en.json'
import { email, min, required } from '@vee-validate/rules'
import { configure, defineRule } from 'vee-validate'
// Define the rule globally
defineRule('required', required)
defineRule('email', email)
defineRule('min', min)
configure({
generateMessage: localize({
en,
ar,
}),
})
But this does not work with vutifay components like this
<template>
<Form @submit="onSubmit">
<VTextField
name="name"
:rules="[required]"
:error-messages="name"
/>
<br>
<button>Submit</button>
</Form>
</template>