HTML5 Validation Prevents Submission in Tabs

Created on 2 May 2018, about 6 years ago
Updated 26 June 2024, about 6 hours ago

Problem/Motivation

Form validation messages are not visible when submitting forms with invalid fields in inactive tabs due to html5 validation.

Steps to reproduce

  1. Install Drupal with standard profile
  2. Edit form display of article content type
  3. Create a Tabs field group and two Tab field groups
  4. Place the two Tab field groups as children of the Tabs group
  5. Place the Title field inside the first Tab group
  6. Place the Body field inside the second Tab group
  7. Create a new Article node, do not populate any fields
  8. Activate the second tab, so the title field is not visible but the body field is
  9. Click Save
  10. See error in console (appears on Chrome, not Firefox)

Google Chrome will generate an error in the console, "An invalid form control with name='...' is not focusable", but nothing else happens. To a user, it would seem as the submit button doesn't work.

Proposed resolution

Use the Drupal.FieldGroup.setGroupWithFocus() to focus on field groups when there is html5 validation messages to be shown.

Remaining tasks

None

User interface changes

Tabs are focused when there is a validation error in a tab.

API changes

N/A

Data model changes

N/A

🐛 Bug report
Status

RTBC

Version

3.0

Component

User interface

Created by

🇨🇦Canada Nathan Tsai

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

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

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.69.0 2024