Can I use an event listener to validate an email address after its entered with JavaScript?

Question

so I am trying to validate that a valid email address was entered once the user finishes entering their email into the input element. If they didn't enter a valid email, it will change the elements border to red, if they did enter a correct email, it just leaves the border alone.

How can I do this WITHOUT submitting the form? I want it to happen either while the user is typing the email or once they unfocus the element.

This is what I have so far, but it is not working.

Thank you!

const emailInput = document.querySelector("#email");
const emailInputValue = emailInput.value;

emailInput.addEventListener("input", (e) => {
  if( /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(emailInputValue) != true) {
      emailInput.style.border = "thin solid red"
  } else {
      emailInput.style.border = "thin solid #0000FF"
  }
})

<div id="email_div">
          <input type="email" name="email" id="email" placeholder="Email" maxlength="50">
          <label for="email" id="email_text">This field is required in order to receive an email confirmation.</label>
        </div>

fyi - regexes are not a surefire way to validate an email address — Daniel A. White, Jun 28 '21 at 01:45
"*it is not working*" isn't a particularly helpful problem statement - can you edit your question to elaborate on how *specifically* you've come to this conclusion that it doesn't work/meet your requirements? Can you update the code you've included here to be a [mre], preferably as a [Stack Snippet](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do)? — esqew, Jun 28 '21 at 02:03
You can bind a function to you button's on blur event, and do the validation using regex. Do not need to bind a event listener in this case. When you focusing out from the text field it will call the blur event and do the validation. — Darshani Jayasekara, Jun 28 '21 at 02:21

score 1 · Answer 1 · answered Jun 28 '21 at 02:10

Here is something that works when input is out of focus !

<input type="email" name="email" placeholder="Email Address" id="email_field" onChange="return emailValidation()">
<span id="email-error"></span>
<script>
function emailValidation()
{
  value = document.getElementById('email_field').value;
  apos=value.indexOf("@"); 
  dotpos=value.lastIndexOf(".");
  lastpos=value.length-1;
  if (apos < 1 || dotpos-apos < 2 || lastpos-dotpos > 3 || lastpos-dotpos < 2){
      document.getElementById("email-error").innerHTML = "Invalid Email Address";
      return false;
    } else {
      return true;
  }
}
</script>

score 1 · Accepted Answer · answered Jun 28 '21 at 02:59

Because you are getting the entered value before the event Listener, it will always be empty. Use preventDefault() if you want to stop the form from been sent

const emailInput = document.querySelector("#email");

emailInput.addEventListener("input", (e) => {
 const emailInputValue = e.currentTarget.value;
  if( /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(emailInputValue) != true) {
      emailInput.style.border = "thin solid red"
      
  } else {
      emailInput.style.border = "thin solid #0000FF"
  }
})

<div id="email_div">
          <input type="email" name="email" id="email" placeholder="Email" maxlength="50">
          <label for="email" id="email_text">This field is required in order to receive an email confirmation.</label>
        </div>

Can I use an event listener to validate an email address after its entered with JavaScript?

2 Answers2