search

LiveGTech / gShell

Interactive graphical desktop environment for LiveG OS.
https://liveg.tech/os
Other
15 stars 3 forks source link

Show custom invalid field message tooltip #30

Open James-Livesey opened 1 year ago

James-Livesey commented 1 year ago

Websites can use constraint validation to check the validity of form elements, and if those elements are invalid, then a message tooltip/bubble will be shown to indicate to the user that the field is invalid. Currently, the bubble that is a part of Chromium appears, but it would be nice to have a custom validity bubble that feels more integrated into gShell.

We can achieve this by checking for the "invalid" event and preventDefaulting it to prevent the bubble from appearing. We can then show our own custom tooltip by getting the validation message from event.target.validationMessage. We may want to provide a custom default, localised validation message (and not use the Chromium one) by checking if the validationMessage is generic (against a generic input) and then showing our own message if it is the same.

James-Livesey commented 1 year ago

We will also need to prevent and show a custom tooltip when hovering over validated fields.