Validation

Inline Form Validation

What problem does this solve?

Real-time inline validation provides quick and precise feedback for users when completing forms and form elements.

When and how to use this pattern

Inline validation occurs once a user has typed an incorrect character within a text field or form element. Inline validation error messages should be short, concise and provide meaningful feedback.

Single field example
This client code is already in use

With the above rules in mind, if multiple input fields are horizontally aligned across an interface, the error message(s) will display differently to keep the user aware of which field(s) have invalid data entered and how to resolve the issue(s).

Single field example
Mobile phone: phone number is invalid (check formatting)
Other phone: phone number is invalid (check formatting)