e14ce38f61
- Add visual asterisk for required inputs in Input.tsx - Add .required style in Input.module.css - Update Contact form to use required props and noValidate - Add role="alert" to Contact form success/error messages - Add tests for required field rendering Co-authored-by: ragusa-it <196988693+ragusa-it@users.noreply.github.com>
4 lines
393 B
Markdown
4 lines
393 B
Markdown
## 2024-05-22 - Semantic Required Fields with Custom Validation
|
|
**Learning:** To combine custom validation UI with semantic `required` attributes (vital for a11y), add `noValidate` to the `<form>`. This prevents native browser bubbles while keeping the accessibility benefits.
|
|
**Action:** Use `noValidate` on forms when implementing custom validation but keep `required` attributes on inputs.
|