2

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>
mohammed albadry
  • 135
  • 1
  • 14

0 Answers0