Add the list of form field errors to top of form page

[joewesch]

As ...

Nelly - Network Engineer

I want ...

To see the list of form field errors at the top of the form page after hitting submit, not just under the respective field

So that ...

When I submit the form and it refreshes the page I can quickly determine that there was an issue with my inputs rather than needing to scroll down and find that there was an error

I know this is done when...

• After submitting an invalid form, I can see at the top of the page which fields did not pass validation.

Optional - Feature groups this request pertains to.

• [ ] Automation
• [ ] Circuits
• [ ] DCIM
• [ ] IPAM
• [ ] Misc (including Data Sources)
• [ ] Organization
• [ ] Apps (and other Extensibility)
• [ ] Security (Secrets, etc)
• [ ] Image Management
• [X] UI/UX
• [ ] Documentation
• [ ] Other (not directly a platform feature)

Database Changes

None

External Dependencies

None

[joewesch]

Use case:

• Create a custom field for a model (e.g., Device) that does not have a widget validator - I chose JSON type
• Add/edit an instance and place invalid data in the form field
• Hit submit

In this use case, the page would refresh and be at the top of the page with seemingly no direct feedback to the user that there was a problem. If they scroll down and see the error on the field (depending on the size of the form it may not be readily apparent) they would finally see why the form did not work.

We currently already place non-field errors at the top of the page, so this change would just add better UX for when a field has an error as well.