UIValidation
How a form says that something is right or wrong: the state of the field and a message that says what to do.
A field in error changes its border and shows a message under it. The colour is a reinforcement: the message is what tells the user what is wrong and how to fix it.
When to use it
Use it
is-invalidwith aninvalid-feedbackthat says what to do (“Enter a valid email address”).- Validate when the user leaves the field or sends the form, not on every key.
is-validonly when confirming helps (a free short name); do not mark every field.- Link the message with
aria-describedby.
Don't
- Show the state with colour alone.
- Write “Invalid value” or an error code.
- Clear what the user typed when it is wrong.
- Show the message far from the field.
Anatomy
A field in error has its control with the state class, and under it the message (invalid-feedback), in the same group as the label. Checkboxes show the message under their label.
Variants and states
This Moodle version has no dark mode: examples stay light.
This Moodle version has no dark mode: examples stay light.
This Moodle version has no dark mode: examples stay light.
Combinations
| Combination | Use it for |
|---|---|
| Field × invalid | The border and the message turn to danger; the field keeps what the user typed. |
| Field × valid | Only where confirming helps (a free short name, a code that exists). |
| Checkbox × invalid | The message goes under the label of the checkbox, and the label takes the danger colour. |
| Form × summary | On a long form, list the errors at the top with links to the fields, and move the focus to the first. |
What Didactika changes and why
| What we changed | Why it helps |
|---|---|
| The message is small, medium weight and in the colour of the state | It is read as part of the field, in the same colour as the border, and it does not look like body text. |
| The border changes and the ring follows the state | Even in a form full of text the field in error is the one that stands out, and focus keeps the same colour as the error. |
| Messages sit tight under the field | The message belongs to one field; far away it becomes a general notice. |
Classes
| Class | What it does |
|---|---|
is-invalid, is-valid |
State of a control |
invalid-feedback, valid-feedback |
Message under the control; shown when the control has the state |
was-validated |
On the form: states follow the browser’s own validation |
In this version
Bootstrap 5.3 draws the focus as a soft ring and keeps every colour in CSS variables (--bs-*), so a theme recolours a control with one variable. The message is the sibling that follows the control.
Bootstrap 4.6 draws the focus as a coloured shadow and compiles the colours of every control, so a theme recolours it by rebuilding its stylesheet. The message is the sibling that follows the control.
Bootstrap 4.6 draws the focus as a coloured shadow and compiles the colours of every control, so a theme recolours it by rebuilding its stylesheet. The message is the sibling that follows the control.
Accessibility
- The message is text, not only a colour or an icon.
aria-invalid="true"on a field in error.- After sending, move the focus to the first error.
- A summary at the top of a long form lists the errors with links to the fields.