Problem/Motivation
When multi-value field is required but not filled, client-side validation error message will display way below the visible input field. It will most likely overlap the next field on the form. On the screenshot below, error message refers to the required "Size" field but is displayed on top of the "Tags" field. This is very confusing for the form users.
Steps to reproduce
- Create a field of a type "Selection list".
- Set the "Allowed number of values" to Unlimited.
- Make the field required.
- Under "Manage form display" configure the field to use "Accessible Autocomplete" widget.
- Go to create new node form.
- Leave this required field empty.
- Submit the form.
Client-side validation will kick in and display the error message "Please select an item in the list". I expect this error message to be shown exactly below the field that failed the validation. Instead, error message is displayed on top of the next field on the form.
Proposed resolution
A11y autocomplete element hides the original select list input element and displays text input element instead. Validation error message is correctly displayed next to the required select list input element but this element is hidden and error message seems to be displayed out of place.
Solution is to add "required" attribute to the visible text input element so that validation error message gets positioned in an expected place. Additional benefit is that wording of the error message will be more appropriate because it will refer to the text field instead of the select list.
Required attribute should be added to the visible text input element only if the select field is required, and none of the options are selected. This is important because text input element gets emptied every time the new option is selected and if we leave it as required it would trigger validation error even though multiple options may be selected in the select list.
This is how the error message should look like after this solution has been implemented.
Remaining tasks
Review MR.
User interface changes
N/A
API changes
N/A
Data model changes
N/A
