[Feature Request] Validate a single field

Problem to solve

I need to just validate one of the fields in the form to do some processing like .validate('email') to used to send a E-mail verification code in the register form. According to the documentation, I used vee-validate.But I encountered another problem: https://github.com/baianat/vee-validate/issues/2219 If vuetify has this feature, I don’t need to use other authentication components.It It took me too much time.

Proposed solution

<v-form ref="form">
  <v-text-field label="E-mail" name="email">
  </v-text-field>
  <v-text-field label="Mobile" name="mobile">
  </v-text-field>
  <v-text-field label="Addr." name="address">
  </v-text-field>
</v-form>

// single
$refs.form.validate('email')
// multiple
$refs.form.validate(['email', 'mobile'])
// All
$refs.form.validate() // existing

[rashadrivera]

I have another case where this feature would be useful.

In the case where we have 2 input fields for dates (lets say the first is StartDate and the second is EndDate). There is a common validation practice to ensure that the StartDate is always after the EndDate. Well, in the case of Vue, if the user triggers validation on both (which is not usual, but can happen when someone is not paying attention), fixing the first field will not remove the validation error on the second. The only way to resolve this is to instruct the user to change the second input field so a revalidation occurs. It would be better if we could invoke an individual validation on the second fields when the first passes validation.

Alternatively, I suggest a method that will clear an error for a specific field. So in this scenario, when one of the dates passes validation, we could clear the error on the second. This approach poses other issue such as follow-on validation that might have other validation issues.

One thing to note, there is the potential reclusiveness as we’ve experienced when invoking the current validate method. I am open to better ideas and suggestions.

[johnleider]

resolved by #14026

Vuetify 3 validation is lazy by default now. You can use a ref on the input to manually validate it.

<v-text-field ref="field" @blur="$refs.field.validate()" />

You also have access to a v-validation component which provides you with more flexibility:

<v-validation :rules="[rules]">
  <template #default="{ validate, reset, resetValidation, ...etc }">
    <input @blur="validate">
  </template>
</v-validation>

If you have any questions, please reach out to us in our Discord community.