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

Videos & tutorials

• Forms ➔
• Forms cheat sheet ➔