Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show custom invalid field message tooltip #30

Open
James-Livesey opened this issue Apr 25, 2023 · 1 comment
Open

Show custom invalid field message tooltip #30

James-Livesey opened this issue Apr 25, 2023 · 1 comment
Labels
enhancement New feature or request

Comments

@James-Livesey
Copy link
Member

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
Copy link
Member Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Development

No branches or pull requests

1 participant