Form error messages
Designing forms is hard,
Designing error messages is harder
Error messages are friends
We’ve all run into error messages when filling out forms
They need to be designed & designed well
Because: we’ve all run into poor error messages
Form usability
Some major concerns when designing forms & their error messages:
- Obviousness & clarity
- Colours (color blindness)
- Accessibility (screen readers)
CSS selectors
input:invalid {
border-color: red;
}
input:valid {
border-color: green;
}
Adjacent selector
input:invalid + .error-message {
display: block;
}
Needs JavaScript
Form validation really needs JavaScript to be super awesome
We’re going to include a little bit of JavaScript to help simplify and & design some items—but don’t worry, it’s already pre-written