Error on the New Hosted Login Page does Not Disappear when a New Value is Typed Loading

Knowledge Articles
,
1

Problem statement

The error on the hosted new login page does not disappear when a new, valid value is typed. How can we get this error to clear once a valid email address is entered?

image
image764×620 21.9 KB

Steps to reproduce

  1. On the signup page, type an invalid email.
  2. The widget shows an error message: “Email is not valid”.
  3. Enter a new email. The error is still visible until pressing the Continue button.

Solution

The following custom page template can be used to hide the error message when the user types a new input. The template can bu updated with the management API. The custom template update only works with the custom login domain.

<!DOCTYPE html><html>
  <head>
    {%- auth0:head -%}
    <script>
        window.onload = function() {
          if (document.getElementById('email')) {
            document.getElementById('email').addEventListener('input',function(e){
              if (document.getElementById("error-element-email")) {
                document.getElementById("error-element-email").style.display = "none"
              }
            });
          }

          if (document.getElementById('username')) {
            document.getElementById('username').addEventListener('input',function(e){
              if (document.getElementById("error-element-username")) {
                document.getElementById("error-element-username").style.display = "none"
              }            
            });
          }

          if (document.getElementById('password')) {
            document.getElementById('password').addEventListener('input',function(e){
              if (document.getElementById("error-element-password")) {
                document.getElementById("error-element-password").style.display = "none"
              }
              
            });
          }
        };
    </script>
  </head>
  <body>
    {%- auth0:widget -%}
  </body></html>