How to use vee-validate 4.7.x with Vuetify 3.1.x for validation?

Question

(Please note: This question already had older posts, however they deal with older versions of vuetify)

I've been strugging to get a simple form validation running with vee-validate (4.7.4), vue (3.2.4) and vuetify (3.1.3).

For example the email input field does not show an error if you enter an invalid email address.

Here's the relevant code (a stackblitz link is further below):

<script setup>
import { markRaw, onMounted, toRefs, ref } from 'vue';
import { useField, useForm } from 'vee-validate';
import * as yup from 'yup';
import TextFieldWithValidation from './components/TextFieldWithValidation.vue';

const email = useField('email');
const password = useField('password');

/*const schema = markRaw(yup.object({
  email: yup.string().email().required(),
  password: yup.string().min(8).required(),
})); //*/

const { handleSubmit, resetForm } = useForm({
  validationSchema: /* schema */ {
    email(value) {
      if (/^[a-z.-]+@[a-z.-]+\.[a-z]+$/i.test(value)) return true;
      return 'Must be a valid e-mail.';
    },
    password(value) {
      if (value?.length >= 8) return true;
      return 'Password needs to be at least 8 characters.';
    },
  }
});

function onInvalidSubmit({ values, errors, results }) {
  console.log('onInvalidSubmit():');
  console.log(values);
  console.log('Errors: ', errors);
  console.log('Detailed results: ', results);
}

const onSubmit = handleSubmit((values) => {
  console.log('onSubmit() - values:', values);
}, onInvalidSubmit); //*/
</script>

<template>
  <div style="padding: 10px">
    <h4>Form with vee-validate (and preferrably yup):</h4>
    <form @submit.prevent="onSubmit">
      <v-text-field
        label="E-mail"
        v-model="email.value.value"
        :error-messages="email.errorMessage.value"
      ></v-text-field>

      <v-text-field
        label="Password"
        type="password"
        v-model="password.value.value"
        :error-messages="password.errorMessage.value"
      ></v-text-field>
    </form>

    <v-btn color="primary" class="mr-4" type="submit"> Submit </v-btn>

    <div>Email: {{ email.value.value }}</div>
    <div>Password: {{ password.value.value }}</div>
  </div>
</template>

I've followed this example on vuetify's documentation:

https://next.vuetifyjs.com/en/components/forms/#vee-validate

Additionally, here's a stackblitz project so you can play around and maybe find the actual error:

https://stackblitz.com/edit/vee-validate-v4-vuetify-g1sg9z?file=src%2FApp.vue

Would appreciate if someone can shed some light into this matter.

Answer 1

Try this :

<script>
import { ref } from 'vue';
import { useField, useForm } from 'vee-validate';
import * as yup from 'yup';

export default {
  setup() {
    const validationSchema = yup.object().shape({
      email: yup.string().email().required(),
      password: yup.string().min(8).required(),
    });

    const { handleSubmit, handleReset } = useForm({
      validationSchema,
    });

    const email = useField('email', validationSchema);
    const password = useField('password', validationSchema);

    const onSubmit = handleSubmit(async (values) => {
      alert(JSON.stringify(values, null, 2));
    });

    return { email, password, onSubmit, handleReset };
  },
};
</script>
<template>
  <form @submit.prevent="onSubmit">
    <v-text-field
      label="E-mail"
      v-model="email.value.value"
      :error-messages="email.errorMessage.value"
    ></v-text-field>

    <v-text-field
      label="Password"
      type="password"
      v-model="password.value.value"
      :error-messages="password.errorMessage.value"
    ></v-text-field>
    <v-btn color="primary" type="submit">Submit</v-btn>
  </form>
</template>