Trying to add validation to the default Email text box with Custom JS

[canvas_support6]

Hi All,

   We have a requirement to add additional formatting rules to the email passed through the registration page. We need to confirm that the email has our domain name and is not using a particular uid. 

   I have created my own html text input, set the Catalog email text box display to none and want to pass through the only the input that meets our requirements. I would like to the default error messages to invoke as usual when an invalid email is passed. I find I can populate the field with .value, but don't get the error message.

I have set

emailInputElement.style.display="none";
emailInputElement.tabIndex=-1;

....

emailInputElement.value = " ";
emailInputElement.click();

anotherElementWithFocus.focus();
Any recommendations?

Thanks,
Simon

[jfenton]

Hey Simon, 

I reached out to one of our engineers to see if he had any thoughts and he said he’s not sure if the desired behavior is possible since the React app won’t recognize the input you’ve injected into the page. He suggested it might be easier to try and apply the new validations/formatting rules to the existing input instead of replacing it. 

Hope that helps! 

[canvas_support6]

Hi Jon,

  I have gone back and forth on this solution and still don't have a result that forces the user to enter our university email format before submitting. At the moment whenever the users enters a non university email I post our own warning in the same format as the Catalog error and attempt to force focus back to the email text box as follows:

            //create email error message and don't display it
            var emailInput = document.evaluate('//*[@id="registration"]/form/div[4]/span[2]/span/label/span/span/span[2]/span', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
            var emailInputFirstChild = emailInput.firstChild;

            emailErrorMsg =
                "<span style='color: #EE0612; font-family: LatoWeb, Lato, \"Helvetica Neue\", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 0.75rem; line-height: 1.4; display: none' id='rmitEmailErrorMessage'><br>Name based Email is required.</span>";

            emailInput.insertAdjacentHTML('afterend', emailErrorMsg);

            //Setup on focus events for the other controls to have them display a message and return focus to the
            //email field on error
            var eNumberStaffInputFirstChild =  document.evaluate('//*[@id="registration"]/form/div[4]/span[3]/span/label/span/span[1]/span[2]/span', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.firstChild;

//I have tried this by itself and together with the blur call
            eNumberStaffInputFirstChild.addEventListener("focus", function () {
                checkEmailFormat(emailInput, emailInputFirstChild.value.toUpperCase().trim());
            });

            emailInputFirstChild.addEventListener("blur", function () {
                checkEmailFormat(emailInput, emailInputFirstChild.value.toUpperCase().trim());
            });

.....

function checkEmailFormat(theTextInput, eString) {

    if(eString fails validation) {
//    displayRMTIEmailErrorMessage
      emailTextElement.firstChild.style.borderColor = "#EE0612";
      var rmitEmailErrorMsg = document.getElementById("rmitEmailErrorMessage");

      if (rmitEmailErrorMsg!=null)
          rmitEmailErrorMsg.style.display = "block";
      event.stopPropagation();
      event.preventDefault();
      setTimeout(function () { theTextInput.focus(); }, 50);
 }

       All attempts to force focus back to the text box have failed. I suspect REACT is taking over and invalidating the calls. Do you have a suggestion to get around this problem?

Thanks,

Simon

[canvas_support6 · Accepted solution]

I resolved the issue with this

displayRMTIEmailErrorMessage(theTextInput);
setTimeout(() => {
    theTextInput.childNodes[0].focus();
    }, 20);