How to validate fields in a Identity Management template?

For this, you would need to use JavaScript since the inputs are not directly a part of a usual form tag.

Please see an example of email validation below (this can be adjusted to validate first or last names as well):

HTML

<p class="lead" formTitle hideIfInsideCheckout></p>
<p class="sub-lead" hideIfInsideCheckout>
    <span ><t>Please fill in the form</t></span>
</p>
<errors-list></errors-list>
<custom-field id="email" fieldName="email"></custom-field>
<span class="errorMessage" id="valEmailMsg"></span>
<custom-fields></custom-fields>
<p hideIfInsideCheckout>
    <button actionSubmit external-event="submitForm" id="sendButton" class="btn prime"><t>Send</t></button>
</p>
<p class="final" hideIfInsideCheckout>
    <a actionSkip class="link"><t>Skip</t></a>
</p>
<custom-script>
  var regexEmail = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
  var emailValid;
 
     function validateForm() {
        let activateButton = document.getElementById('sendButton');
        if (emailValid == true) {
            activateButton.removeAttribute('disabled');
        } else {
        activateButton.setAttribute('disabled', 'disabled');
        }
    }
 
function validateEmail() {
    var parentEmail = document.getElementById('email');
  var emailInput = parentEmail.children[0]; 
  var valEmailMsg = document.getElementById('valEmailMsg');
      if (!regexEmail.test(emailInput.value)) {
      emailInput.setAttribute('style', 'border: .25px solid #FF0000;');
      valEmailMsg.innerHTML = 'Please enter a valid email address.';
      emailValid = false;
    } else {
      emailInput.removeAttribute('style', 'border: .25px solid #FF0000;');
      valEmailMsg.innerHTML = '';
      emailValid = true;
    }
    validateForm();
  }
 
  setTimeout(function(){ 
  var parent = document.getElementById('email');
  var child = parent.children[0];
  child.setAttribute('onkeyup','validateEmail()');},100)
</custom-script>

Last updated: June 26, 2026