Customize Universal Login - Signup Form validation error behavior

pcastro · April 19, 2024, 6:13pm

Hello,

So, i have this signup form with added custom fields, added validation function using form_content_start.html

<script>
  function isFirstNameEmpty(element, formSubmitted) {

    var firstName = element.value.trim();

    return firstName.length > 0;
  };
</script>
<fieldset>
  <div class="ulp-field">
    <label for="first-name"
      >{{ prompt.screen.texts.varFirstNamePlaceholder}}</label
    >
    <input type="text" name="ulp-first-name" id="first-name" />
    <div
      class="ulp-error-info"
      data-ulp-validation-function="isFirstNameEmpty"
      data-ulp-validation-event-listeners="input"
    >
      {{ prompt.screen.texts.varFirstNameError }}
    </div>
  </div>
</fieldset>

as you can see the event listener is ‘input’ so every time user inputs a string on the field the function is executed which results to a decent user experience.

however, on the email address field which is the default OOTB field(user/email/password) of Universal Login. the validation error remains visible even when user starts to input something on the field, which results to a bad user experience… is there a way I can modify this behavior?

Thanks!