Form - guidance on when validation errors should be shown

[dahliaferrer]

Problem: our devs/designers are uncertain when they should alert the user that there is a validation error on a form.

This was brought up in July 27 Office Hours, but Matt had already thought about this as well:

From Matt in DS staff Slack chat "1. At what point does a field’s input get validated? OnSubmit? OnBlur (i.e. when focus has been removed from the input)? As the input’s value changes?

2. If OnValueChange, do we always do it? Or delay it to allow the user a first attempt?
3. Does when validation occur differ depending on whether the validation is conducted client-side (can be performed in app, real-time) or server-side (requires network requests, speed depends on backend app’s API design)?
4. If validation is performed OnSubmit in a form with many fields, is there any scrollTo / focus behavior?
5. If validation is performed OnSubmit on a form with multiple field errors, are all errors shown at once? One at a time?

In general, it feels like the sooner an error is identified, the sooner we should surface it so that it can be addressed in real-time, rather than doing a bunch of work filling out data, submitting it and having to redo again.

Perhaps a more elaborate use case would be beneficial and/or seeing validation on a field’s value in addition to required validation?"

• [ ] Reach out to DS staff to see who should work on this
• [ ] Find use cases, research, etc. speak with stakeholders? (devs/designers, Edgar, Sam?)
• [ ] Add copy to "forms" guidance clarifying for devs/designers when to flag an error

[taysea]

This would still be valuable to add, updating labels.