Overview
This article explains why a signup pop-up tooltip appears with the default message Please fill in this field even when no-email and no-password messages have been configured.
Applies To
- New Universal Login
Cause
When JavaScript (JS) is enabled in a browser and the browser detects a required field (such as the email or password fields during sign-up), it will display its default validation message. This message, for example, Please fill out this field , will appear in the language configured for the browser. If JS were not enabled, the error messages configured within Auth0 for scenarios like no-email or no-password would typically be displayed.
Solution
The no-email and no-password keys for error messages are intended for the Universal Login page itself and do not override or control the default tooltip displayed by the browser. The tooltip Please fill out this field is a browser-controlled message, and Auth0 does not offer a built-in tool to change this specific browser behavior at this moment.
For further information on this topic, refer to New Universal Login Input Pop-up Error “Please fill out this field”.
A potential workaround involves customizing the Universal Login template via the Management API. Guidance on updating the template can be found at Customize Universal Login Templates.
To prevent the default browser validation tooltips, the template code can be updated. The following script is a conceptual example and requires thorough testing before implementation in a production environment.
---------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
{%- auth0:head -%}
<style>
/* Remove default tooltip styles */
input:invalid {
box-shadow: none;
}
::-webkit-validation-bubble,
::-webkit-validation-bubble-message,
::-webkit-validation-bubble-arrow {
display: none !important;
}
</style>
</head>
<body>
{%- auth0:widget -%}
<script>
window.addEventListener('load', function() {
// Wait for Auth0 widget to load
const removeTooltips = () => {
const inputs = document.querySelectorAll('input');
if (inputs.length === 0) {
// If inputs are not yet available, retry after a short delay
setTimeout(removeTooltips, 100);
return;
}
// Remove tooltips from all inputs
inputs.forEach(input => {
// Remove default tooltip
input.style.setProperty('--webkit-validation-bubble-message', 'none');
// Prevent invalid event from showing tooltip
input.addEventListener('invalid', (e) => {
e.preventDefault();
});
});
};
// Start the tooltip removal process
removeTooltips();
});
</script>
</body>
</html>
The Auth0 Product Team is aware of this behavior and is tracking it as part of ongoing efforts to improve accessibility by ensuring custom error messages are consistently used. There is currently no estimated time for a resolution. This behavior is a side-effect of standard browser functionality when encountering required fields with JS enabled and is not a bug within Auth0’s Custom Text feature.