implement submitCount and submitErrors

[gurgeous]

Hey logaretm, thanks so much for creating veevalidate and now formwerk. Your efforts are really appreciated :)

Would you consider NOT showing validation errors on blur? Users don't like it when errors appear and disappear, because it makes the form jump around. They lose context. Especially older/slower users, or users seeing something for the first time. Showing errors on blur can be real confusing. Check out the excellent gov.uk form standards:

"When to tell the user about validation errors"
https://design-system.service.gov.uk/patterns/validation/

In my experience the pattern that works best for users:

1. Disable submit button until all required fields have values
2. Only show errors on submit (never show any errors prior to submit)
3. Display fresh errors on next submit (don't change errors while they are working)

I've built zillions of forms across many companies. I even founded a SaaS forms startup. I love forms :) Just an idea since you are still working on the library. Thanks again!

[logaretm]

Hey, thank you for the suggestions. We do not validate on blur AFAIK, but we validate whenever the value changes regardless.

One thing I learned by maintaining vee-validate is there is no one size that fits all in that area. So in Formwerk, we always validate and we always generate the error, the user decides when it should be shown.

Most of the examples in the docs utilize :user-invalid and :user-valid selectors, which is determined by the browser and not the library. That state is satisfied in chrome by interacting with the input and then blurring it, merely focusing it and blurring it without changing the value should not trigger the selectors.

So I understand how it appears to validate on blur. Maybe there is a mistake in an example in the docs? LMK.

Having said that, I believe the experience you are describing is also desired and is not doable at the moment, and I would like to make it possible to implement.

So I'm thinking about exposing: wasSubmitted and submitErrors which would allow you to build the exact experience you are describing. Would that be suitable?

[gurgeous]

Thanks for the response! I think I understand and I like the design - separating validation from error display, and leaning heavily on the standard invalid selectors.

You can imagine that it would be somewhat challenging to implement the behavior I described above. I just went through this with a veevalidate form and I had to jump through quite a few hoops...

I like the idea of submitErrors and wasSubmitted. The other one I use sometimes is submitCount, a generation number of sorts that can make it easy to figure out when things change.

Another piece is the concept of required fields. Ideally the submit button would be disabled until all required inputs have a value (even if invalid). Is there a way to get a list of required inputs (good), or a list of values from required inputs (better), or a boolean that tells you whether all required inputs have some value (best)? :P Previously I did this by poking around the schema, but that was rough. I looked at standard schema briefly and I don't think it exposes the concept of required.

[logaretm]

I like the idea of submitErrors and wasSubmitted. The other one I use sometimes is submitCount, a generation number of sorts that can make it easy to figure out when things change.

Yea, I think we can also expose submitCount. Minimal effort IMO, I may get around to doing it in the weekend. Or if you want, you could create a PR for each state.

Another piece is the concept of required fields...

Formwerk can actually track the required fields the same way it tracks disabled fields, so this is doable as long as the required fields are marked with required attribute.

For schemas, this is a bit challenging because we want to do it through the standard schema spec, this is actually being discussed here, feel free to drop in your perspective.