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

Question

I need to display all form validation errors in one alert at the top of a form when the user clicks submits (not inline with the input elements).

How do I suppress the inline validation error message if I am using Vuetify and Vee-Validation. (I will display errors in an alert using the $errors array). There is nothing about this in the documentation.

I tried not passing anything in error-messages, but then I lose the red outline on the invalid field.

My field is configured like this

<v-text-field
     v-validate="'required|email'"
     v-model="email"
     :error-messages="errors.collect('email')"
     label="Email Address*"
     data-vv-name="email"
     required
     outline>
</v-text-field>

Answer 1

If you do not need to display any 'hints' with your input component, you can set hide-details to true.

I wish there was a way to hide the error message without interfering with the hints.

  <v-text-field
    v-validate="'required|email'"
    v-model="email"
    :error-messages="errors.collect('email')"
    label="Email Address*"
    data-vv-name="email"
    hide-details=true
    required
    outline>
  </v-text-field>

Answer 2

You can also do hide-details="auto", which instructs Vuetify to hide the inline error messages by default, and display them only when there are actually errors.

Answer 3

<v-text-field
 v-validate="'required|email'"
 v-model="email"
 label="Email Address*"
 data-vv-name="email"
 name="email"
 required
 outline>
</v-text-field>

 <div v-if="errors.has('email')" class="form-control-feedback form-text" v-cloak>The email is required
            </div>