In-Line Error Validation 
on Submit

Error messages appear in-line under a form input or select when an error on that field is preventing the form from saving. In Procore, these messages appear after a user attempts to submit the form.

Anatomy

Input

In-line errors appear on text inputs, multi selects, group selects, selects, tiered selects, date selects, text editors, and text area. Please see the linked documentation for how to use each type of input.

Error Message

Be as human and concise as possible to explain what the user needs to do to fix the error and/or what caused the error. Avoid technical jargon when writing error messages. In-line error messages are sentence case with punctuation with a character count limit of 40. If necessary, the message can wrap to the second line.

Common Use Cases

Patterns

When the input appears on a full page form, include an error banner at the top of the form with the following message: Please fix the errors below, and try saving again.
Do not include an error banner on modals, smaller cards, or when all of the fields in a form are visible above the fold of the page.