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… 😉
A colleague noticed that the tooltip function on a Xpage stopped working after submitting the page to the server and when the validation did not pass. The same behaviour occurred when I added a computed text control that would spit out an anchor reference using a tooltip. Odd.
I found an old post of mine where I described the use of the xe:tooltip control. This control seems to keep working even when the XPage fails to validate. So that is a win.
However, in my case I would have to apply the control on many places which does not make me happy.
I also wanted to alter the layout of the tooltip a bit via a template so I found this piece of code. To my delight I noticed that the tooltip also kept working after a failed validation!
So a simple bit of code can fix tooltip again:
So after applying a template for the tooltip and applying some CSS my tooltip looks a bit more readable and less boring:
Note that I have to set the xp:this.title property for the inputTextArea control. Adding an additional attribute for the placeholder won’t do for the template.