Vee-validate: enhancement: delay only for invalid fields

[denjaland]

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.

[logaretm]

You can apply a transition on the error element as well, closing since it is not something vee-validate will probably support in the near future.

[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.

[pendar747]

I agree with @fyodorvi, users needs to see the positive validation immediately otherwise it can be confusing for them, so the way delay is currently implemented doesn't seem to be useful.

[denjaland]

Hi,

Any chance that we could get this reopened, @logaretm? I've browsed through the code to see if I could do a PR for this, but to be honest, I wasn't able to find it ;)

I would really REALLY like this option. The immediate validation is so annoying when you start typing, so we want the delay (and instant validation on form submission), but then when I corrected the issue, I just want to see that immediately to be honest.

[logaretm]

Well I don't mind implementing it after next tag, since it is a nice UX enhancement. Currently the delay only applies to the input handler, which triggers validation.

To achieve what you guys need, we need to change that, so it should immediately validate but add the errors later after the delay amount if it has any, if not it will just clear them for that input. It kind of requires moderate amount of work.

[denjaland]

Brilliant! Thanks!

[d3bgger]

I think a better solution would be to only validate on 'input' event, after an input is touched (after the first 'blur' event) (see #784).
IMHO delay is good as it is.

[denjaland]

@nkwinder I disagree.
That does not enable me to interactively update errors while the user is typing. I don't think you understand the case. (or else I'm not understanding your reply, which is perfectly possible too ;-) )

[d3bgger]

ok i'll try to explain myself.

Firstly, delay is not just a UI feature, meant only for when to display errors to the user. Its main function is to 'debounce' the input events, so to avoid running validations too many times (on every keystroke). This is huge for performance, especially when you have expensive validations (eg. ajax requests). So changing how delay works, and making it always running the validation, but just delaying the display of the errors, breaks this very useful feature.

Now as i understand it, your issue is that as the user starts typing for the 1st time in a field, the errors start showing up, even if the user is not finished typing. That's why you said you used delay of 500.

My proposed solution to this is to not use high values for delay, but instead start the validation of the field on the first blur event and THEN start validating the input event. This way, the first time the user is typing something he will see no validation. As soon as he blurs, he will see an error in case of a mistake. When he starts typing again to correct his mistake, he will see errors real-time as he types, but as i see it, this is not a problem, because its the 2nd time he types, AFTER he has made a mistake in his initial input.
The user expects to see errors showing up as he types, when its the 2nd time he types in a field, trying to correct his mistakes.

[pnowy]

Hi,

from my perspective it would be a good idea to extend the set of classes to additional one which connects two other classes: valid and dirty. Currently I have something like that in bootstrap (example):

<input class="form-control" :class="{'is-valid': !errors.has('email') && fields.email && fields.email.dirty}"  type="text" name="email" v-validate="'required|email'" />
<div v-show="errors.has('email')" class="invalid-feedback">
       {{ errors.first('email') }}
</div>

The class is-invalid is set by classes global config but unfortunately for 'is-valid' a cannot use it because I would like to show the user validation state only when he started typing - I know there is mentioned data-vv-validate-on="blur" but when user starts typing good option is to provide instant validation instead of on blur validation and it would be easier with mentioned additional class.

[liquidvisual]

Any new developments on this?

[Hazlank]

Hi

so how to use transtion to make element delay show.
I set data-vv-delay="1000"

.fade-enter-active, .fade-leave-active {
    transition: opacity 1s;
    display: none;
  }

<transition name='fade'>
   <i v-if="errors.first('email') || field.email">
       {{ errors.first('email') ? 'X' : '√' }}
   </i>
</transition>

But.I've been typing in the input box,errors.first('email') can't return the error result.so the transition time is uncontrolle.how to resolve it