Re: [csswg-drafts] [selectors] pseudo selector to match forms ValidityState (#1525)

I find this suggestion useful. Currently, we have the `:valid`/`:invalid` and `:user-valid`/`:user-invalid` selectors. However, they are too generic and only indicate whether the value is valid or invalid, without providing further details. There are also `:in-range`/`:out-of-range` selectors, which specify whether the value falls within the defined range. However, there are no corresponding selectors for the `pattern`, `minlength`/`maxlength`, `type` and other attributes. It would be useful to introduce new selectors for a one-to-one correspondence with the `ValidityState` properties.

A set of selectors might look as follows (presented in the table):

| HTML attribute | `ValididtyState` | CSS invalid selector | CSS valid selector |
|-|-|-|-|
| `required` | `valueMissing` | `:value-missing` | `:value-exists` | 
| `min`  | `rangeUnderflow` | `:range-underflow` and also match current `:out-of-range` | `:in-range` | 
| `max` | `rangeOverflow` | `:range-overflow` and also match current `:out-of-range` | `:in-range` | 
| `minlength` | `tooShort` | `:too-short` | `:optimal-length` |
| `maxlength` | `tooLong` | `:too-long` | `:optimal-length` |
| `type` | `typeMismatch` | `:type-mismatch` | `:type-match` |
| `step` | `stepMismatch` | `:step-mismatch` | `:step-match` |
| `pattern` | `patternMismatch` | `:pattern-mismatch` | `:pattern-match` |

A combination of the `:not()` pseudo-class and CSS invalid selectors can be used as an alternative to CSS valid selectors (e.g., `:not(:pattern-mismatch)` instead of `:pattern-match`).

A set of these selectors would enable the addition of hidden error messages that can be displayed without the need for JavaScript. This approach can be useful for basic form validation.

-- 
GitHub Notification of comment by alexnozer
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1525#issuecomment-2758602362 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 27 March 2025 16:09:12 UTC