Learn how to use text fields for positive validation and send data

Question

I have a v-text-field with validation rules that trigger something when focus is lost.

<v-text-field
    :rules="validationRules"
    @blur="emitFunction"
></v-text-field>

Is there a way to only call emitFunction when validation passes?

Answer 1

You can wrap it with v-form and use v-model to track the validity of the form

const isValid = ref(false)
function emitIfValid() {
  if (isValid.value) emitFunction()
}

<v-form v-model="isValid">
  <v-text-field
    :rules="validationRules"
    @blur="emitIfValid"
  />
</v-form>