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-validprogressive 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-invalidand:valid/:invalidare ignored novalidateform attribute to disable browser build in constraint validation (disables validation and error messages. But :valid/:invalid styling is still applied 🤷🏼♂️)real-timeandlatevalidation butlatevalidation 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-describedbyattribute 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)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent