Controlling Real-Time Validation in VeeValidate

[miguel-neto-andrade]

I'm currently working in a Vue.js 3 project (composition API), incorporating VeeValidate alongside Yup for form validation. I've come across a particular behavior that I'd like to customize. Currently, it engages in real-time validation as I input data into the form fields, but I'm seeking the ability to exercise more control over when this validation takes place. My goal is to trigger validation exclusively when I submit the form.

Here's an example of my form, which has been validated at form-level:

<Form @submit="onSubmit" :validation-schema="schema">
  <TextInput name="email"/>
  <TextInput name="password" type="password"/>
  <LoadingButton/>
</Form>

The validation schema is:

const schema = Yup.object().shape({
  email: Yup.string().email().required(),
  password: Yup.string().min(6).required()
});

The TextInput component was created according to the documentation:
https://vee-validate.logaretm.com/v4/examples/custom-inputs/

I've explored the VeeValidate documentation and attempted to find a solution on my own. However, I couldn't figure out how to control the validation behavior to match my requirements.