Error message

An error message belongs to a field, not to a form. It sits with the control it judges, it is referenced by that control (aria-describedby), and it names the fix rather than the rule: “Enter a postcode, like SW1A 1AA” does work that “Invalid input” does not. A summary at the top of the page is a different component, and the two are usually shipped together: the summary collects, the message explains.

The word describes the line itself, so the timing is a separate question. A message that arrives on submit and a message that arrives while you type are the same component playing two roles, and the second one has its own word (see inline validation). Submit is the safe default for anything the field cannot judge until it is finished, because complaining about an unfinished value is how a form ends up shouting at someone halfway through their own email address.

Three things make one work. It appears in space the layout already reserved, so the button under it does not jump out from under the pointer. It is announced, usually by a live region or role="alert", because a sighted user sees a red line appear and a screen reader user gets nothing unless the page says so. And it never relies on colour alone: the text is the message, the colour is emphasis.

Copy is most of the work. Say what happened, in the words of the person filling the form, and say what to do next. Avoid blame (“you failed to”), avoid system vocabulary (“regex mismatch”), and keep the example concrete. If the message cannot suggest a fix, the validation rule behind it is usually the thing that needs changing.