Validation Message Inconsistency
Posted: June 23rd, 2022, 8:16 pm
The location of validation messages is inconsistent between different input types. This has made it difficult to style the controls and make them match.
In the below example, textboxes and dropdowns are structured similarly except textboxes have the validation message outside of the control's "label" element while dropdowns have them inside their "label" element.
In this example, CSS was used to display the description above the inputs, but while textboxes left the validation messages alone, dropdowns suddenly displayed them on top. This issue is on the dropdown.
Alternatively, CSS can target the validation message for the dropdown, but not for textbox controls as it exists next to the textbox control instead of contained inside is. It's especially an issue if other controls are contained in the same table cell like hidden inputs or script tags. This issue is on the textboxes.
Suggestion
Change the textbox to have the label tag and validation message wrapped in a dedicated span, and change the dropdown to match. Maybe even add an attribute dedicated to marking what kind of control it's supposed to be.
In the below example, textboxes and dropdowns are structured similarly except textboxes have the validation message outside of the control's "label" element while dropdowns have them inside their "label" element.
In this example, CSS was used to display the description above the inputs, but while textboxes left the validation messages alone, dropdowns suddenly displayed them on top. This issue is on the dropdown.
Alternatively, CSS can target the validation message for the dropdown, but not for textbox controls as it exists next to the textbox control instead of contained inside is. It's especially an issue if other controls are contained in the same table cell like hidden inputs or script tags. This issue is on the textboxes.
Suggestion
Change the textbox to have the label tag and validation message wrapped in a dedicated span, and change the dropdown to match. Maybe even add an attribute dedicated to marking what kind of control it's supposed to be.