Skip to content

[BUGFIX] Fix "not focusable" error on mandatory conditional checkbox groups - #129

Open
kitzberger wants to merge 1 commit into
in2code-de:masterfrom
kitzberger:fix-moresteps-checkbox-validation
Open

[BUGFIX] Fix "not focusable" error on mandatory conditional checkbox groups#129
kitzberger wants to merge 1 commit into
in2code-de:masterfrom
kitzberger:fix-moresteps-checkbox-validation

Conversation

@kitzberger

Copy link
Copy Markdown
Contributor

In multi-step forms, a mandatory checkbox group (multiple inputs sharing name="...[]") that is conditionally hidden/shown by powermail_cond triggers a browser console error on submit when the user checks a non-first checkbox:

An invalid form control with name='...' is not focusable.

Two bugs in PowermailConditions.js cause this:

  1. #getFieldByMarker uses querySelector (singular) and returns only the first checkbox of a multi-value group. #hideField/#showField therefore only disable/enable and derequire/rerequire that single checkbox, leaving the rest untouched.

  2. #rerequireField unconditionally restores a native HTML5 "required" attribute, even when the field originally carried powermail's custom "data-powermail-required". Powermail uses data-powermail-required (not native required) for multi-checkbox mandatory fields and handles "at least one checked" via data-powermail-multiple. The native "required" added by #rerequireField is then enforced by reportValidity() on a field inside a display:none fieldset (hidden by the multi-step navigation), which the browser cannot focus.

Fix:

  • #hideField/#showField now iterate querySelectorAll('input, select, textarea') over the wrapping container so every input in a multi-value group is disabled/enabled and derequired/rerequired.
  • #derequireField/#rerequireField bookmark which required attribute was present (native "required" vs "data-powermail-required") and restore the same one, preserving powermail's custom validation for multi- checkbox groups.

Resolves: #128

…groups

In multi-step forms, a mandatory checkbox group (multiple inputs sharing
name="...[]") that is conditionally hidden/shown by powermail_cond triggers
a browser console error on submit when the user checks a non-first
checkbox:

  An invalid form control with name='...' is not focusable.

Two bugs in PowermailConditions.js cause this:

1. #getFieldByMarker uses querySelector (singular) and returns only the
   first checkbox of a multi-value group. #hideField/#showField therefore
   only disable/enable and derequire/rerequire that single checkbox,
   leaving the rest untouched.

2. #rerequireField unconditionally restores a native HTML5 "required"
   attribute, even when the field originally carried powermail's custom
   "data-powermail-required". Powermail uses data-powermail-required (not
   native required) for multi-checkbox mandatory fields and handles
   "at least one checked" via data-powermail-multiple. The native
   "required" added by #rerequireField is then enforced by
   reportValidity() on a field inside a display:none fieldset (hidden by
   the multi-step navigation), which the browser cannot focus.

Fix:
- #hideField/#showField now iterate querySelectorAll('input, select,
  textarea') over the wrapping container so every input in a multi-value
  group is disabled/enabled and derequired/rerequired.
- #derequireField/#rerequireField bookmark which required attribute was
  present (native "required" vs "data-powermail-required") and restore
  the same one, preserving powermail's custom validation for multi-
  checkbox groups.

Resolves: in2code-de#128
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

"An invalid form control is not focusable" on multi-step forms with mandatory conditional checkbox groups

1 participant