In an application I have added some CSS to highlight fields that fail validation. The css looks as followed:
Basically I an looking for the aria-invalid=true attribute on input elements. Works great but not on all input elements. For example re-styling of checkboxes requires some work. But what if you would re-style the element that contains the checkbox?
In the following example I have captured a checkbox control inside a table data cell of 1% width:
For the checkbox control I have defined a custom validator that gets only triggered when a certain element send the xpage to the server (an button control with id btnSendToCommittee)). When the validation fails the checkbox also gets the aria-invalid=true attribute.
To apply a visual indication if a certain checkbox fails I have setup a simple JS function:
This function scans the page for inputs with the aria-invalid=true attribute and for all matches checks if the found item is a checkbox. If so, the parent, containing element (the table data cell) will be applied some styling.
Besides a listing in the xp:messages control I also have a visual indicator for the checkbox on the location of the xpage:
I have not managed to write a single-line css selector therefor I still loop through the found inputs that match the aria-invalid=true attribute. Here your assistance comes in… 😉
Kwintessential Notes 