How many validation messages should be dispalyed at one time to the user?

[eduardh-landg]

Hi!

Upon fixing a bug in the date-field component it was revealed that at one time multiple errors can occur.

Should we just display 1 error at the time OR should we display multiple errors one underneath each other?

[alexcanning]

1 per field ideally. Even though date input has 3 inputs, I'd lean towards combining multiple errors into a single message such as:

• No day: The date must include a day
• No month: The date must include a month
• No year: The date must include a year
• No day and month: The date must include a day and a month
• No day and year: The date must include a day and a year
• No day, month and year: Enter a valid date

[alexcanning]

I've just moved your query into the Q+A category as it seems like more of a question than a request to modify Canopy, hope that was the intention!

[markblandford]

I think there are two parts to this:

1. How many validation errors are displayed on screen = I think we display 1.
2. How many validation errors should a Canopy component 'emit' at a time = 'emit' all errors.

I think our Canopy guide around displaying validation errors, should recommend only displaying a single, validation error (for an input / component) at a time. I think anything more than that breaks the 'succinct' principal, plus you'll probably find that solving one validation error solves multiple (minLength & required for example).

For how many validation errors should a custom, Canopy component 'emit', i.e. in the errors property, I think the component should expose all validation errors. It is then on the consumer / parent to handle these (see point 1). This is how built-in controls work plus, the type of the errors property is ValidationError | null. This is a key-value-pair so the interface effectively describes that there could be multiple validation errors.

[owensgit]

From a UX perceptive I agree with @alexcanning, if one error can cover things for the user, then let's just show that. For example as @markblandford mentioned, you wouldn't need to show minLength & required at the same time, you just need required.

One thing to note, with the Date of Birth component, is that it emits it's own errors for it's internal inputs (e.g. missing day, invalid date) and then the Form that it sits in also can emit a required error for the whole thing. After @eduardh-landg fixed the previous bug it caused a new issue in that now multiple error messages were being shown - something that was masked by the original bug.

If the consensus is to only show one error message where possible, then we need to update the template logic to handle the various errors coming from within the Date of Birth component and also form the form itself, with more conditions. This could get a little messy in the code - so I think we'd also need to include some guidelines in Storybook for how you handle it to ensure consistency.