My experiments based on the cloud4 series of articles:
- Part 1: HTML and CSS
- Part 2: Layering in JavaScript
- Part 3: Validating a checkbox group
- Part 4: Custom validation messages
- includes browswer build in constraint validation
- includes @supports to make
:user-invalid/:user-valid
progressive enhancement for chrome (chrome doesn't support them (on 2023-09-09)) - no_js/js cases:
<body data-js-enabled='false'>
approach. If js is enabled,:user-valid/:user-invalid
and:valid/:invalid
are ignored novalidate
form attribute to disable browser build in constraint validation (disables validation and error messages. But :valid/:invalid styling is still applied 🤷🏼♂️)real-time
andlate
validation butlate
validation is generally always better (Live validation UX)- includes :has pseudoclass test
@supports (selector(:has(input))) {
.field-wrapper:has(input:required) label:after {
content: "*";
}
}
- custom “error” element (a paragraph tag after each .js-validate input).
- The “error” element should have a hidden attribute so it is not displayed by default
- The input should have an
aria-describedby
attribute with the ID of the “error” element so assistive technologies can convey validation feedback to users when the input is in focus. - errors gets a messages from Constraint Validation API (localized browser-specific error message)