Defer validation

[ribrewguy]

It appears as if the validation is triggered eagerly. This means that if I have a form of 5 required fields, they are all highlighted immediately with error text. This is not a pleasant UX because the user hasn't even begun to fill out the fields before the user is reprimanded for entering (or not entering, as the case may be) bad data.

Is there a way to defer validation until some other time (ideally a submission)?

[albanm]

This is not the normal behavior. The "initialValidation" option controls this. As you can see with this example the only properties with error displayed right away are those with predefined values, empty properties are only validated once the user interacted or the v-form validate method is called (click on the bottom right button). What you describe could be happening either if you use initialValidation=all or if you called validate() early, that or it is a bug with a specific schema and you can provide a codepen so that I can have a look.

[ribrewguy]

Thanks @albanm. I see that the initialValue option does prevent the error from displaying initially. It seems like this should be set to "none" by default, but I suppose that's a design decision not everyone would agree with.

However, I do not see a way to prevent the errors until "the v-form validate method is called". This is exactly what I'm looking for. However, I don't see how to make that work. The form always validates on input. This example codepen from the project examples demonstrates that: https://codepen.io/pen/?&editors=101.

How can the validation be completely deferred until validate is called?

[albanm]

Not possible right now. I agree this is a problem, I need to work some more on form validation. Unfortunately I cannot guarantee that I will be able to do so very soon.

[albanm]

The vuetify documentation doesn't seem to allow to do this, cf https://vuetifyjs.com/en/components/forms/#validation-with-submit-26-clear

Also the implementation doesn't seem to support it, cf https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/mixins/validatable/index.ts#L148 as soon as the input has a value and was focused at least once it is susceptible to display its errors. I don't how to prevent this yet, except maybe calling resetValidation after each input which feels ugly.

This is weird, i thought i remembered that it was the default behavior. Please tell me if you think I am missing something.

[albanm]

The topic is discussed here: https://github.com/vuetifyjs/vuetify/issues/3530

Setting validateOnBlur and calling resetValidation feels hackish but it looks like it is the way to go.