Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blur to show errors but not to fix errors #440

Open
tsongas opened this issue Feb 22, 2019 · 3 comments

Comments

Projects
None yet
4 participants
@tsongas
Copy link

commented Feb 22, 2019

Is there a way to show errors on blur, but hide errors immediately as they are fixed?

In my opinion, both Vuelidate basic form examples (https://monterail.github.io/vuelidate/#sub-basic-form) are sub-optimal. Showing errors before blur can be jarring and annoying...it makes no sense to show an invalid email address error when the user has only typed the first letter.

Using v-model.lazy hides errors until after blur, which I prefer, the problem is that the user does not get real-time feedback when correcting errors (see https://jsfiddle.net/toequ523/). For example, as soon as an email address is corrected to be valid, the error should disappear immediately regardless of blur.

Is there a way to accomplish that with Vuelidate, or any other Vue validation library for that matter? I'm afraid we're letting how Vue works dictate the user experience, when really it should be the other way around. Happy to supply more examples to help clarify if needed.

@engblh

This comment has been minimized.

Copy link

commented Feb 23, 2019

Recently I switched from vuelidate to VeeValidate. It has very good documentation for all use cases, and very active git community.

@tsongas

This comment has been minimized.

Copy link
Author

commented Feb 23, 2019

I'm curious to see if I can address this with https://github.com/blocka/vue-simpleform since it's based on Formik which I enjoyed while working with React.

@thedamon

This comment has been minimized.

Copy link

commented Feb 24, 2019

I think you could maybe manually use the touch() and reset() to check this (for each input, or in custom input components)..

I think if on @blur, you call this.$v.thisInput.$touch(), it will begin to live-check errors if you wrap your error checking in a v-if="$v.thisInput.$dirty". If you want to "stop" live validating you can call this.$v.thisInput.$reset()

I can't vouch for this ... it is just what I understand from the docs

Great Q though and a perfectly rational thing to want out of validation library.. I have looked at both vuelidate/vee-validate and i appreciate the structure and approach of vuelidate (Data-based) much more, it's just much more DIY to get it hooked to the interface nicely.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.