enhancement: delay only for invalid fields

Versions:

• VueJs: 2.3.3
• Vee-Validate: 2.0.0-rc3

Description:

I’d like to have an option where only the display of ERRORS is delayed. Consider a field “email” with the validators required|email I don’t want the user to be confronted with “the email address is invalid” as soon as he starts entering a value, so I enabled data-vv-delay=“500” so that it won’t show as long as he’s typing.

This has a s trange side effect - when he does enter a valid email address, it says the email is invalid for 0.5 seconds. What I would like to see is that only errors are being delayed. So you would be validating input on every change immediately, so that when it’s entirely valid, I can update the view.

In fact - delay should ONLY happen when no errors are currently active; for these situations we don’t want the user to be bothered with the different validations while he’s still typing. As soon as he does correct the mistakes though, the validation should be updated.

I hope this makes sense.

Steps To Reproduce:

[logaretm]

You should either use lazy modifier on v-model for Vue bound fields, or use data-vv-validate-on="blur" which will only validate when the user leaves the input, which is more reasonable than delaying the error population.

A new but not released enhancement is to allow global setting of validation events, which enables you to set them to blur without having to add the validate-on attribute each time.

[fyodorvi]

A agree with @denjaland, it makes no practical sense at all to use delay in current implementation. I reckon the only valid use of delay is actually not to bother the user with messages while he is typing. However, there’s no need to delay positive validation, it needs to be immediate, e.g. user enters invalid email, sees an error after he finished typing, goes and corrects the error, and sees the positive result immediately, otherwise it might be confusing for him.

Applying a delayed transition on an error element is an option, however error display does not limit itself to just the error element, but may include different icons, classes applied to the input, etc. It will be a hustle to put a manual css delay on all of that, and to maintain afterwards.

Lazy and blur do not cut it as well, as you get an overall input delay, and you do want on-input validation.