NavigateFormErrorsController
Purpose
A controller to allow users to navigate between form errors when a submission comes back with failed validations.
Actions
| Action | Purpose |
|---|---|
current | Scroll to the current error |
next | Scroll to the next error |
previous | Scroll to the previous error |
Targets
If these targets are specified, the controller will automatically disable and re-enable the buttons as the user clicks between errors
| Target | Purpose | Default |
|---|---|---|
current (Optional) | The button that navigate to the current error. | - |
next (Optional) | The button that navigate to the next error. | - |
previous (Optional) | The button that navigate to the previous error. | - |
Classes
| Class | Purpose | Default |
|---|---|---|
current | The class to apply to the targeted element that the controller is currently pointing at. | currentError |
Values
| Value | Type | Description | Default |
|---|---|---|---|
selector | String | The CSS selector the controller should use to find the form errors | - |
Events
| Event | When | Dispatched on | event.detail |
|---|---|---|---|
- | - | - | - |
Side Effects
None
How to Use
There is nothing worse as an end user than filling out a long form, only to be bounced back and have to read back through the whole form to try and find where you missed a field.
If you add the controller and its elements to a header/footer/sticky widget/anywhere you like, when a form submission fails, you can use it as follows to allow the user to jump back and forth between the fields that failed validation.
If you tell the controller about your next, current and/or previous target then controller will automatically disable and re-enable the buttons as the user hits the first/last error.
If the controller cannot find any errors using the provided selector, it will hide the controller root element using display: none so that the user is not shown buttons that do nothing.