Validate Email Format on Custom Login Page

Knowledge Articles
, ,
1

Last Updated: Aug 2,2024

Overview

This article details how to validate the email format when using a Custom Login page (Embedded Login or Classic Universal Login).

Applies To

  • Embedded Login
  • Classic Universal Login

Solution

Auth0 validates email format on the Server side. However, it may be better to implement Client side email validation to avoid unnecessary API calls. Auth0’s Lock.js login widget uses a third-party library named validator for email validation.

The same library can be used with a fully custom login widget. Here is a simplified sample code using this library:

<script type="text/javascript" src="validator.min.js"></script>
<script type="text/javascript">
  if (validator.isEmail('foo@bar.com')) {
    webAuth.redirect.signupAndLogin ();
  } else {
    alert("Email validation failed");
  }; //=> true
</script>

On this GitHub link there is a real example on how to use the library along with our Custom Classic login page. For more information about how to customize the Classic Universal Login page, see this documentation.

NOTE: The example above implements Client Side validation only on signup. It is possible to adapt the code to do it upon login too.