Cannot dynamically disable and reenable an anchor tag form button in Okta widget

Questions API
,
1

I am using the Okta widget on a custom domain. I am performing some minor modifications once the widget has rendered using the “afterrender” event. See after render event here. All is working fine except one modification which attempts to validate whether the user has entered a properly formatted email address before resetting or unlocking their account. (Okta does not provide this. They will allow the user to submit jibberish and then state they sent an email to something that is not even an email address).

The problem is that I can seem to disable the anchor tag button and change its behavior while it waits for a proper email address to be entered: <a data-se="email-button" class="button button-primary button-wide email-button link-button" href="#">Reset via Email</a>

I can add to the click event functionality, but I cannot suspend its behavior. I have tried:

  1. stoppropagation
  2. preventdefault
  3. .prop(‘disabled’, true)
  4. .attr(‘disabled’,‘disabled’);

In chrome inspector view, I have tried to remove all attributes of the anchor tag, and it still submits the form button. What did work is if I changed the anchor tag to a p tag temporarily, and then changed it back. But when did this in code with .replacewith(…) or .after(…).remove(), the submit function did not work correctly with the a tag and form. It just returned to the main login screen, and does not send an email even if the address is associated with an account.

Here is the current code where I was testing preventDefault (.after(…).remove() attempts are commented out). This function runs when the unlock or reset controller renders. The console log for the click event is triggered here but preventDefault does not work:

function addEmailValidation() {
  pString = '<p id="locked-button" data-se="email-button" class="button button-primary button-wide email-button link-button" href="#">Send Email</p>'
  aString = '<a data-se="email-button" class="button button-primary button-wide email-button link-button" href="#">Send Email</a>'
  validationString = "<div id='email-validation-text'>Email Address is Required!</div>"

  // $('a.button').after(pString).remove();

  // $('p.button').click(function (e) {
  //   $("#email-validation-text").remove()
  //   $('div.o-form-fieldset').after(validationString)
  // });

  $("a.button").click(function (event) {
    console.log("a tag click event")
    event.preventDefault();
  });

  $('input[name="username"]').on('input', function () {
    var input = $(this);
    var re = /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}\b/i;
    var is_email = re.test(input.val());
    if (is_email) {
      // $('p.button').after(aString).remove();
      $("#email-validation-text").remove()
    }
    else {
      $("#email-validation-text").remove()
      // $('a.button').after(pString).remove();
      $('div.o-form-fieldset').after(validationString)
    }
  });
}

The Okta reset and unlock account controller code (React, I think?) can be found here:

  1. Password reset
  2. Account unlock