I managed to be able to execute custom javascript on an Azure ADB2C sign-up page by using the "Custom page" feature and enabling Javascript from the User Flow properties in Azure ADB2C.
For example this works for making an alert appear when clicking on the "Continue" button when signing-up a new user:
document.getElementById("continue").onclick = () => alert('test');
However I would like my javascript to be executed only if the form is valid when clicking on the Continue button.
How can I execute a javascript function on the submit button of the sign-up form only after the form is validated successfully?
This is my custom page code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sign-up</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" data-preload="true">
<link rel="stylesheet" href="https://example.com/SignUp.css" data-preload="true">
<link rel="stylesheet" href="https://example.com/background.css" data-preload="true">
<script defer src="https://example.com/SignUp.js"></script>
</head>
<body>
<section class="bg">
<div class="container pt-6">
<div class="columns mt-6">
<div class="column p-6 has-background-light">
<p class="block is-size-3">
Create your Free Account
</p>
<p class="block">
Blabla
</p>
</div>
<div class="column p-6 has-background-white">
<h3 class="title is-3">
Create your Account
</h3>
<div id="api" role="main">
</div>
</div>
</div>
</div>
</section>
</body>
</html>