Skip to content

Fix form validation error message display when invalid => valid => in…#283

Open
chrishow wants to merge 1 commit into
cferdinandi:mainfrom
chrishow:bugfix/form-validation-message
Open

Fix form validation error message display when invalid => valid => in…#283
chrishow wants to merge 1 commit into
cferdinandi:mainfrom
chrishow:bugfix/form-validation-message

Conversation

@chrishow

@chrishow chrishow commented Apr 4, 2026

Copy link
Copy Markdown

…valid

Closes #274

Description

If there's a visible error, you fix it, and then introduce a new error without leaving the field, it will show the red "invalid" indicator without displaying the error message.

The error only shows again on-blur.

This PR fixes that bug.

Analysis

When you blur the field, the aria-invalid attribute is added.

Then when you fix the error, the aria-invalid attribute is removed.

If you then introduce a new error, the onInput handler returns before running isGroupValid/isFieldValid because the aria-invalid attribute isn't there.

This PR makes two changes:

  1. Instead of removing the aria-invalid attribute in removeError, instead set it to false. This is perfectly cromulent according to the spec, it means "There are no detected errors in the value".
  2. On input, instead of checking to see if aria-invalid === true in the input handler, check to see if the aria-invalid attribute exists at all.

Kelp Contributor License Agreement

I give Chris Ferdinandi and Go Make Things, LLC permission to license my contributions on any terms they like. I am giving them this license in order to make it possible for them to accept my contributions into their project.

As far as the law allows, my contributions come as is, without any warranty or condition, and I will not be liable to anyone for any damages related to this software or this license, under any kind of legal claim.

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.

Form Validation: Invalid => Valid => Invalid doesn't show error message

1 participant