Form validation ensures that users enter correct information into data entry fields. This can include the data itself, lack thereof, or formatted a certain way. When any validation constraints are not met, error messages should be provided to help users easily identify and resolve issues within the form.

Constellation forms use both client-side and server-side validation to ensure accurate data entry according to authoring intentions.

Client-side validation

Client-side validation offers real-time feedback as users interact with and navigate through the form. For example, if a required field is left empty, an inline error message appears directly below the field indicating that it cannot be blank. This messaging is consistent across all required fields.

Server-side validation

Server-side validation occurs when the user Submits the form. Should validation identify any fields that contain an error, a banner appears at the top of the form. This error banner lists all fields that have some form of validation error, including the field name and what the error is. Additionally, the fields themselves will also provide an inline error message.

When collapsed, the banner only displays the number of errors in the form. When expanded, the details of each field and its corresponding error are then displayed.

When the banner appears, focus is brought to the banner to allow keyboard and screen reader users an efficient starting point to review the identified errors and how to remediate them. This approach allows users flexibility in how they resolve errors. They may choose to correct all issues at once or address them one at a time, submitting the form repeatedly until all errors are resolved.

Issues listed in the error banner currently do not provide direct linking functionality to send focus to the specific form field with an error. While this implementation is not required for WCAG compliance, it is considered a best practice and we are investigating the feasibility of enhancing this behavior in the future.