HTML5 Validation Prevents Submission in Accordion

Created on 25 June 2022, over 2 years ago
Updated 14 November 2023, about 1 year ago

Problem/Motivation

Let's say we have an accordion group with Accordion A & Accordion B. Accordion A has a required field.

When submitting the form and:

Accordion A is visible
Required "A" field is empty
Google Chrome will display the error, "Please fill in this field" and prevent submission.

However, when submitting the form and:

Accordion B is visible
Required "A" field is empty
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.

🐛 Bug report
Status

Needs review

Version

3.0

Component

Code

Created by

🇮🇳India Supreetam09 Kolkata

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

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

  • 🇫🇷France zorax Monoblet

    Patch #4 not working for me.
    I have 3 accordion items.
    The first is open, the two others are closed.
    There are required field in the second and third acordion items.
    If I click on submit button just after filling the first accordion, an error still appears in the console without message for the user
    An invalid form control with name='field_onglet3_perso_description[0][value]' is not focusable.

Production build 0.71.5 2024