HTML5 validation is preventing form submit and not fully accessible

Created on 28 September 2012, about 12 years ago
Updated 9 September 2024, 3 months ago

Problem/Motivation

The use of HTML5 "required" attribute in D8 has resulted in an accessibility regression. Basic client-side validation now occurs *before* hitting the server and running FAPI validation functions, so the browser jumps in and provides an error as you attempt to submit the form.

In Drupal 7, the FAPI error messages include a) an icon + alt tag to indicate their relative importance (e.g. warning/notice), b) an error message which included the name of the field for reference, c) a red outline on the field.

But in D8, those enhanced error messages are never displayed, in favor of the default browser response to a required field, which in Chrome's case is "Please fill out this field," without any mention of which field is referred to.

Proposed resolution

The accessibility team's goal for form validation is #1493324: Inline form errors for accessibility and UX β†’ . HTML5 best practices are:

  1. Javascript validation first
  2. HTML5 validation for no-Javascript
  3. Server-side validation

Implementing Javascript validation before the HTML5 validation would restore accessibility for most users. A proposed patch changing the error message to "SomeFormField is required" would improve accessibility for those without Javascript.

Remaining tasks

  1. Confirm the approach - make this a global change (current patch in #165) or only target specific core themes (per #121)?
  2. Write a patch with tests
  3. Manual testing
  4. Change record

Related Issues

#1696648: [META] Untie content entity validation from form validation β†’
πŸ› Allow forms to set custom validation error messages on required fields Needs work
#1845546: Implement validation for the TypedData API β†’

Original report by mgifford

I was very surprised to see that in D8 that we've lost some accessibility in the current release as far as how error messages are presented.

They were much better in D7. In D8 they just say "Please fill out this field.", where in D7 there was a red box describing the problem at the top of the page. The error also had an image and text which identified what exactly the problem was.

Ultimately we need this in core πŸ› Allow forms to set custom validation error messages on required fields Needs work

But the defaults for D8 should be at least as good as they were in D7.

πŸ› Bug report
Status

Needs work

Version

11.0 πŸ”₯

Component
FormΒ  β†’

Last updated 1 day ago

Created by

πŸ‡¨πŸ‡¦Canada mgifford Ottawa, Ontario

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • html5

    Implements and supports the use of HTML5.

  • Needs subsystem maintainer review

    It is used to alert the maintainer(s) of a particular core subsystem that an issue significantly impacts their subsystem, and their signoff is needed (see the governance policy draft for more information). Also, if you use this tag, make sure the issue component is set to the correct subsystem. If an issue significantly impacts more than one subsystem, use needs framework manager review instead.

  • Needs change record

    A change record needs to be drafted before an issue is committed. Note: Change records used to be called change notifications.

  • Needs issue summary update

    Issue summaries save everyone time if they are kept up-to-date. See Update issue summary task instructions.

Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

Production build 0.71.5 2024