class name not showing when trying to validate email

Question

I have a form the is trying to validate email. If the email is incorrect the class for the input does not show. Below is the code for the html:

<div class="email-entry desktop-container">
<div id="a"></div>
<form name="form1" action="#">
  <input id="test" type="text" name="text1" placeholder="Email Address" value="" onclick="return ValidateEmail(document.form1.text1)">
  <input type="image"  src="images/icon-arrow.svg" alt="submit">
  <p id="addedText"></p>
</form>

and below I have implemented the following javascript:

function ValidateEmail(inputText) {
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
  if (inputText.value.match(mailformat)) {
    alert("You have entered a correct email addresss")
    document.form1.text1.focus();
    return true;
  } else {
    // var img = document.createElement('img');
    // img.src = "/images/icon-error.svg"
    document.getElementById("addedText").innerHTML += "This is the wrong email address";
    document.getElementByClassName("invalidEmail")
    // alert("You have entered an invalid email address!");
    document.form1.text1.focus();
    return false;
  }
}

the css I am trying to activate is the following:

.invalidEmail {
  border: 1px solid red;
  background-image: url("/images/icon-error.svg");
  background-repeat: no-repeat;
  background-position: 75% 25%;
}

At the end of the day I want the an image to appear in the form like this. . The issue is nothing seems to appear.

Answer 1

To add a class to your input element, you need to use element.classList.add and to remove it you need element.classList.remove. Also, document.getElementsByClassName("invalidEmail") will get you all the elements which contain invalidEmail classname. So it is not required here

Have gone through the repo which you mentioned:

• CSS specificity is one of the culprit here. Adding !important will work fine now (check border in the snippet) but ideally you should read about it and then fix the css without using !important

• It seems you are not hosting your project and opening the index.html file directly. Host your project on some server (e.g. localhost) and it should work fine (python -m SimpleHTTPServer is a simple command to help you spawn a local server quickly which you can use but there are others as well).

• function ValidateEmail was not using proper regex test for email testing. Read here for more details

Have tried to fix it for you

function ValidateEmail(inputText) {
  var mailformat = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;;

  if (mailformat.test(inputText.value)) {
    document.getElementById("addedText").innerHTML = "";
    alert("You have entered a correct email addresss")
    //document.form1.text1.focus();
    document.getElementById("test").classList.remove("invalidEmail")
    return true;
  } else {
    // var img = document.createElement('img');
    // img.src = "/images/icon-error.svg"
    document.getElementById("addedText").innerHTML = "This is the wrong email address";
    document.getElementById("test").classList.add("invalidEmail")
    // alert("You have entered an invalid email address!");
    document.form1.text1.focus();
    return false;
  }
}

.invalidEmail {
  border: 1px solid red !important;
  /*Check here*/
  background-image: url("https://image.flaticon.com/icons/png/128/752/752755.png");
  background-repeat: no-repeat;
  background-position: 75% 25%;
  background-size: 12px 12px;
}

<div class="email-entry desktop-container">
  <div id="a"></div>
  <form name="form1" action="#">
    <input id="test" type="text" name="text1" placeholder="Email Address" value="" onclick="return ValidateEmail(document.form1.text1)">
    <input type="image" src="images/icon-arrow.svg" alt="submit" >
    <p id="addedText"></p>
  </form>
</div>

Hope it helps. Revert for any doubts.

Note: This is how icon image and red boundary is coming for me