Form Errors

Form Level Errors

Form level errors are displayed at the top of the form and provide an overall status of the form’s state, and errors that need to be fixed. A list of items will display that informs the user which field(s) need(s) to be fixed in order to submit the form for processing.

If form-level errors are needed, add a containing div with the classes .form-errors and .error. Inside the container, create a paragraph tag with the .large-font and .bold classes. Finally, add a paragraph detailing the general error(s) within the form and include a bulletted list of items that need attention before the form can be submitted successfully.

Field Level Errors

These errors are contextual and placed directly below a form field. They may also be used for live feedback on the successful status of a field, such as password strength or password confirmation. The information will provide a visual cue that the field in question needs to be adjusted through user input to successfully submit the form.

If a field-level error is needed, add a containing div with class .field-validation-feedback. Inside the container, add another div with class .field-validation. This will handle the placement of any field validations that are needed. If feedback (i.e., character count) is needed for the field, then add that element as a sibling of the .field-validation container.

The error feedback is placed in a the field feedback section, which is described in detail in the Molecules section.

HTML5 Validation Errors

These errors are created if a form is submitted but does not pass the HTML5 validation on a required input. JavaScript runs that will check any required="required" fields in a form. A class of .validated will also be added to the form tag which will allow for CSS styling of the input error state.