Skip to content

feat: [#2393] support the :valid and :invalid CSS pseudo-classes - #2394

Open
marciomazza wants to merge 1 commit into
capricorn86:masterfrom
marciomazza:feat/pseudo-class-valid-invalid
Open

feat: [#2393] support the :valid and :invalid CSS pseudo-classes#2394
marciomazza wants to merge 1 commit into
capricorn86:masterfrom
marciomazza:feat/pseudo-class-valid-invalid

Conversation

@marciomazza

Copy link
Copy Markdown

Description

Resolves #2393

:valid / :invalid are never matched — SelectorItem.matchPseudoItem has no
case for them, so any such selector silently returns nothing.

document.body.innerHTML = `<input id="a" required><input id="b" required value="x">`;
document.querySelectorAll(':invalid').length; // happy-dom: 0 — real browsers: 1

Fix: add an invalid / valid case. It is gated on willValidate so it only
matches constraint-validation candidates (skipping disabled / non-applicable
elements, as browsers do), then reflects checkValidity().

Deviation left on purpose: :valid / :invalid are not implemented for <form>
and <fieldset> themselves (they would need aggregate validity); only individual
form controls are covered.

Tests

Added 1 test: :invalid matches an empty required input, :valid matches a
filled one, and a disabled required input plus a <div> match neither.
Fails before / passes after. Full npm test passes.

AI

I used Claude Code to write this, over multiple iterations. I guided and reviewed
it myself at every step.

Before submitting the PR, please make sure you do the following:

  • Read the contributing guidelines.
  • It's really useful if your PR references an issue where it is discussed ahead of time.
  • Please check Allow edits by maintainers to make review process faster. Note that this option is not available for repositories that are owned by Github organizations.

Tests

  • Make sure to add tests for your changes. Run your test in a real browser to make sure that the test tests what a real browser would do (e.g. by running the code in the browser console).
    • Ran the repro in Chrome 152: :invalid matched #a only, :valid matched #b only; the disabled required input and the <div> matched neither. Same as the test asserts.
  • Run the tests with npm test locally to make sure that all tests pass before submitting the PR.

Title

  • The title of the pull request should be in the format of "type: [#issue] description". The type can be feat, fix, chore or BREAKING CHANGE. The issue is optional and can be omitted if the pull request does not relate to an issue.
  • The title should be concise and descriptive. The title will be used when generating release notes. Make sure that the title is easily understood by users of the library.

AI tools

  • Please disclose in the PR description that you used AI tools to generate code. This is important for transparency and to ensure that the generated code meets the quality standards of the project.

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.

:valid and :invalid CSS pseudo-classes are never matched by querySelector

1 participant