[#29461] - Scroll to error on form validation
- Closed
- 1 Feb 2022
- Medium
- Build: master
- # 29461
Steps to reproduce the issue
Create a long form. I used the registration form with the additional user profile plugin.
Go to that form on the front end and scroll down to the submit button without completing any fields.
Click on the Submit button
Expected result
The form is either validated or there is some feedback on their being errors
Actual result
Nothing appears to happen. The button appears to be broken.
What has actually happened is that right at the top of the page outside of the viewport the error message have been displayed but there is nothing to indicate that they exist or that you need to scroll up.
System information (as much as possible)
Joomla 3 and Joomla 4
Additional comments
Remember this is for the client validation so there is no page load.
Suggested change
Any of the following but in order of preference
- Scroll to the error messages when they are created
- Display information next to the button that the form is invalid
Demo of problem
joomla-cms-bot
- | Labels |
Added:
?
|
||
Yes but its everywhere which is why I highlighted it in j3 so it can bubble up ;)
It's also an accessibility issue but as the automated testers won't pick it up people don't notice
Normally my form validation error are directly at the field, I use qtip2 for this something like this:
is this possible for a11y, as alternative would it possible to add the error message below the field (like our descriptions?)
My2cent: Validation errors are already above the respective input field. These errors which are discussed here alwas are related to a button. In general, buttons are in the toolbar, so the position of the message is ok.
Only if buttons on longer screens, as in the events described here (installation, mail test , registration) the message is out of view.
My question: Is it possible to add the error message below the button which caused the error? I think that we cannot always identify a certain field because these errors are not validation errors.
Validation errors are already above the respective input field.
Only on fields using html validation - which is not as many as it should be and that is the in browser validations
This is specifically about the errors generate server side on post.
The ideal for these serverside errors would be for
- focus is on the message (in current location)
- and details on the field
so my suggest below the field (above a optional description) would be ok?
The problem is also with js validation or? I didn't looked at it but doesn't it also add a joomla alert at the top?
| Status | New | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2022-02-01 23:08:10 |
| Closed_By | ⇒ | brianteeman | |
| Labels |
Added:
No Code Attached Yet
Removed: ? |
||
@brianteeman We especially need this solved for the installation form because this can become very long in case of errors, see also diverse comments in recent J4 installation issues.