Touch all fields on submit OR validate only fields that got blurred

[christianlmc]

Describe the feature

Right now, when you set validateMode: 'blur' on useForm() ALL fields from the form get validated on blur.

So this is what I did in order to fix it:

<span v-show="touched.email">{{ errors.email }}</span>

However, by doing this, when you submit the form no message shows up, because none of the fields have been touched.

Ideally I would like to either have blur only trigger validation on the blurred field OR make form submission touch all fields

Additional information

• [X] Would you be willing to help implement this feature?

[lttr]

It would be great to follow some authority like: https://www.nngroup.com/articles/errors-forms-design-guidelines/, maybe even make it the default.

In scope of this issue specifically it should be possible to provide the user with an error message right when she finishes typing. When she is correcting her mistake, it might provide feedback right away. Validation of other fields should not be triggered during her work on this specific field unless she hits enter or clicks on submit button.

[Mini-ghost]

I can't believe I missed this!

The following stackblitz example might be a temporary solution (but it's not that elegant) https://stackblitz.com/edit/vormscore-issues-29?file=src%2FApp.vue&terminal=dev

I'm exploring the possibility of adding this functionality. One idea might be to trigger full validation whenever a field is blurred, and only keep error messages for fields that were ever touched.

Feel free to open a PR to implement this feature if you like. Thank you so much!

[Mini-ghost]

@lttr Thank you so much for this article, it made a lot of great points, it was super useful for me.

[lttr]

Well, I thank you for creating this library in the first place! 😄 I'll give it a try.

[lttr]

Unfortunately the workaround you have posted @Mini-ghost does not really work. The problem is as the OP describes - it does not show the error message on untouched fields. Removing the condition for touched works better, however it is then probably the same behavior as the currently default validateMode: 'submit'.

I would add reValidateMode: 'input' which then behaves similar to what I have described before. And with the condition for touched removed, the example works quite well - it is a common behavior around the web.

I have however encountered another issue - if I want to validate a checkbox (imagine a checkbox field "You have to agree with terms and conditions") it does not behave correctly probably because checkbox and other elements fires change event instead of input event on an "atomic" user action.

In case we would use your library in production I would dive deeper, however I'm not able to work on the PR right now. I like the simplicity and the examples of smart components in the docs (over what Vuelidate or VeeValidate offer).

[Mini-ghost]

@lttr

Thank you so much for your awesome support and praise for Vorms!

I found that the workaround I provided had an issue with the condition between touched and submitCount, but I have fixed it. Could you please take a quick look and let me know what you think?

However, this solution is not entirely in line with the idea you previously provided, as it still requires ensuring the entire form is correct before submission, not just the fields that have been touched.

Your suggestions opened up new possibilities for me, and I'm excited to explore how to implement them. It might take a little while, but I'm super grateful for your help and guidance!

Once again, thank you for your support for Vorms and your assistance. You rock!

[christianlmc]

@Mini-ghost Yeah, the workaround you provided is the desired behavior that I have on my project, I did things a little different, but the result is the same.

I'll try to work on a PR for this weekend. Thanks for considering my suggestions

[lttr]

I found that the workaround I provided had an issue with the condition between touched and submitCount, but I have fixed it. Could you please take a quick look and let me know what you think?

@Mini-ghost It seems to work!

If you guys would be willing to implement the default behavior close to the recommendations, it would be absolutely great. The boilerplate code is problematic, since developers would not get it right usually, unless it is well encapsulated in a library code.

[christianlmc]

Update: I got the general functionality working as intended locally. I'll just polish the code, add some tests and open a PR soon​™

[christianlmc]

@Mini-ghost just noticed the same issue is happening when we use validateMode: 'input' and validateMode: 'change'

I'll update the PR

[christianlmc]

@Mini-ghost Actually, input and change do not update the touched object. dirty property from useForm is a boolean that returns true if the form is dirty. Should we change that behavior as well? Ideally we would want a dirty object in order to implement the same behavior for input and change