vee-validate 3 + nuxt show errors only on submit

Question

I'm having a hard time figuring out form validation that only triggers the errors upon submit. The main reason I don't want to show inline errors are because of this article which insinuates inline errors provide a worse user experience than providing the error messages upon submit:

https://uxmovement.com/forms/why-users-make-more-errors-with-instant-inline-validation/

Even though the vee-validate 3 docs state that validating before submit is a "must":

https://logaretm.github.io/vee-validate/guide/forms.html#basic-example

Unfortunately this post cover vee-validate 2 and not 3:

How do I stop displaying the inline validation error message in Vuetify?

This post talks about catching the errors on submit, however I don't understand how I would disable the errors before submit: Vee Validate 3 catch errors on form submit

Vee-validate 2 had somewhat clear instructions regarding this but I cannot seem to find it in Vee-validate 3 docs: https://vee-validate.logaretm.com/v2/guide/events.html#changing-events-per-field

I'm using Vuetify and Nuxt, and have registred vee-validate in my plugins:

import { extend } from "vee-validate";
import { required, email } from "vee-validate/dist/rules";

extend("required", {
    ...required,
    message: "This field is required"
});

extend("email", {
  ...email,
  message: "This field must be a valid email"
});

My form code:

 <ValidationObserver
    ref="form"
    v-slot="{ invalid, validated, handleSubmit, validate }"
  >
    <v-form @submit.prevent="onSubmit">
      <ValidationProvider
        name="email"
        rules="required|email"
        v-slot="{ errors, valid }"
      >
        <v-text-field
          v-model="email"
          :error-messages="errors"
          :success="valid"
          label="E-mail"
          required
        ></v-text-field>
      </ValidationProvider>

      <ValidationProvider
        name="password"
        rules="required|max:50"
        v-slot="{ errors, valid }"
      >
        <v-text-field
          v-model="password"
          :counter="50"
          type="password"
          :error-messages="errors"
          :success="valid"
          label="Password"
          required
        ></v-text-field>
      </ValidationProvider>
    
      <v-btn color="primary" type="submit">Submit</v-btn>
    </v-form>

Script section:

<script>
import { ValidationObserver, ValidationProvider } from "vee-validate";
export default {
  components: {
    ValidationObserver,
    ValidationProvider,
  },
  data: () => ({
    password: "",
    email: "",
  }),

  methods: {
    onSubmit() {
      this.$refs.form.validate().then((success) => {
        if (!success) {
          // run your error code here
        }

        alert("Form has been submitted!");
      });
    },
  },
};
</script>

The submit would trigger the errors but it doesn't prevent them from showing up inline as well. Appreciate all feedback&replies, I guess my last resort is to switch to vee-validate 2 but here's hoping someone knows how it's done in vee-validate 3.

Edit:

The only solution I could come up with is setting hide-details="" on the fields which covers the error message up but not the red underline, only to attach a span below which is triggered by a v-if. I doubt this is a good solution though and would love to update it.

<v-text-field
              v-model="email"
              :error-messages="errors"
              :success="valid"
              label="E-mail"
              required
              hide-details=""
            ></v-text-field>
             <span v-if="submitted">{{errors[0]}}</span>

Answer 1

You can set the interaction mode to be passive, which doesn't validate on any event. This is mentioned in the docs in the interaction and ux section. This is the equivalent to events in v2.

https://logaretm.github.io/vee-validate/guide/interaction-and-ux.html#passive