Validation messages

[gfellerph]

Validation is easy to begin with (<input type="text" required>) and very difficult to master (accessibility, complex patterns, dependency on other fields, custom business logic, async validation on the server).

Here's a proposal that explores validation components that take some of the burden (especially accessibility and display style) from the user.

Resources

• WAI, User notification: https://www.w3.org/WAI/tutorials/forms/notifications/#listing-errors
• Accessibility Developer Guide, Validation Messages: https://www.accessibility-developer-guide.com/examples/forms/validation-messages/
• Smashing Magazine, Designing Better Error Messages UX: https://www.smashingmagazine.com/2022/08/error-messages-ux-design/
• W3C, Using ARIA role=alert or Live Regions to Identify Errors: https://www.w3.org/TR/WCAG20-TECHS/ARIA19

Requirements

• Validation messages need to be connected to either the field they validate or the <fieldset> they belong to via aria-describedby (example with correctly connected error messages)
• After submit, the first invalid field needs to receive focus
• Error messages should be announced through aria-live=polite (especially if validation happens without page reload)
• [optional] Validation messages can be displayed grouped together at the start of the form in addition to being displayed below the element (example with grouped error messages)
• A single error message should be presented as text, a list of messages should be presented as a list

Suggested pattern

<form>
    <!-- Optional feedback summary at the beginning of the form -->
    <post-feedback-summary type="invalid"></post-feedback-summary>

    <!-- Invalid feedback with one item -->
    <input type="text" name="name" id="name">
    <post-feedback type="invalid" for="name">
        <post-feedback-item>Please enter a valid name.</post-feedback-item>
    </post-feedback>

    <!-- Invalid feedback with multiple itmes, should be rendered with role="list" and role="listitem" -->
    <input type="text" name="password" id="password">
    <post-feedback type="invalid" for="password">
        <post-feedback-item>The password field is required.</post-feedback-item>
        <post-feedback-item>Please enter a password with more than 18 characters.</post-feedback-item>
    </post-feedback>
</form>