Form validation

Guidance

Place inline validation messages within the field's <label> element.
Visually align inline validation messages with the input fields, so people using screen magnifiers can read them quickly.
Either place an icon next to the error, labeling the icon as error with ARIA or off-screen text, or use text in front of the message itself. Like: "Error: The email address is not a valid email address." The use of the icon or text not only clearly labels the following text as an error, but allows users to know that the message is an error without relying on color alone.
The form field receives an aria-describedby attribute that references the id of the error message.
The error message should be wrapped in an role="alert" so that screen readers users receive the message, and can act on it. If the page is fully refreshed, add ‘Error: ’ to the beginning of the page <title> so screen readers read it out as soon as possible.

Visually associate inline validation messages with the input fields (e.g., place validation closely to the input field).
Place an icon in front of an error to draw attention to an error.
Use color as a secondary way to draw attention to an error.

Form field success validation is only use for password creation.
- Use success validation to show when a user has met the password criteria
Other forms of success validation can be used with check mark icons, alert messages, progress bars/step list page, and toast messages.

Describe what the user still needs to do in a mandatory field that has been left incomplete or unanswered, or answered incorrectly
Repeat what the form label is asking the user to do, but with slightly more detail