How to validate an email, a user has input, using javascript (not jquery)

Question

I'm trying to write some javascript that validates the input from the user. to make sure what is submitted is an email. but I have not been able to figure this out. I have tried regular expressions but they have not worked for me. here is a link to my code https://codepen.io/alexRamirezBlonski/pen/rpGyKd

the following is my javascript

//targeting the red buttons (showing sign up form)
var btn2 = document.getElementById("btn2");
var btn1 = document.getElementById("btn1");
//disable buttons after a click
//btn2.removeEventListener("click", showDiv);
//btn1.removeEventListener("click", showDiv);

//what happens during the event of being clicked
btn2.addEventListener("click", showDiv);
btn1.addEventListener("click", showDiv);
//creating function for what happens when you are clicked
function showDiv() {
  document.getElementById("welcomeDiv").style.display = "block";
}
//onclick the input text clears for users
function clearDefault(a){
  if(a.defaultValue==a.value){
    a.value=""
  }
}
//this is the end of the form apeering

//targeting the submit buttons
var submit = document.getElementById("submit");
//what happens during the event of being clicked
submit.addEventListener("click", showMsg);
//creating function for what happens when you are clicked
function showMsg() {
    document.getElementById("welcomeDiv").style.display = "none";
    document.getElementById("msg").style.display = "block";
    btn2.removeEventListener("click", showDiv);
    btn1.removeEventListener("click", showDiv);
}
/*function showMsg() {
  if (document.getElementById('welcomeDiv').value == ""){
    alert('Put something in!');
    document.getElementById('fname').style.borderColor ="red";
    return false;
  } else{
    document.getElementById("welcomeDiv").style.display = "none";
    document.getElementById("msg").style.display = "block";
  }
}*/
//disable double click event
/*function disableClick(){
 if(document.getElementById("msg").style.display == "block"){
alert('hey')
  }
}
disableClick();*/
//prevent form pressing enter below
function checkEnter(e) {
  e = e || event;
  var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
  return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}
document.querySelector('form').onkeypress = checkEnter;

Possible duplicate of [How can you validate an email address in JavaScript?](https://stackoverflow.com/questions/46155/how-can-you-validate-an-email-address-in-javascript) — AuxTaco, Jan 07 '18 at 06:43

score 1 · Accepted Answer · answered Jan 07 '18 at 05:31

I always use the same regex, it makes my life more easy! With it all that you really need is to check does the value match current regex: regex.test(el.value). Here is the full example:

var regex = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
var el = document.getElementById("input");

function validateEmail() {
  var isValid = regex.test(el.value) && el.value !== "";
  alert("Is valid: " + isValid)
}

<input id="input">
<button onclick="validateEmail()">Validate</button>

score 0 · Answer 2 · answered Jan 07 '18 at 05:23

0

This question has already been answered in the following thread:

How can you validate an email address in JavaScript?

If that does not help, let me know and we can explore your scenario closer.

answered Jan 07 '18 at 05:23

iHazCode

592
3
14

it worked and I added the following to HTML to prevent the events from going through unless the email is valid. but how do I make the border red and have it displays an icon on the right like an x. thanks in advance. – Jan 07 '18 at 20:39
but there is only one problem when I don't enter anything it assumes that the value is a user email. – Jan 07 '18 at 20:49
Ahh.. Yes, let's modify your code so that the RegEx matcher is only executed when your input's length is !== 0. – iHazCode Jan 07 '18 at 21:10
If you believe an answer is a duplicate, please flag it as such. Don't post an answer just to post a link to another question. – mason Feb 02 '18 at 03:53
Wow. You docked me points for trying to answer a question? I get your point, but I that seemed uncessesary. I'm just trying to help out and gain rep so I can contribute more in other ways. Guess I'll just stick to "lurking". ;) – iHazCode Feb 02 '18 at 04:03

score 0 · Answer 3 · answered Jan 07 '18 at 05:30

You can use this for email validation.

It matches the expression for validation

function ValidateEmail(){
  var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
  var email = document.getElementById('email').value;
  if(email.match(mailformat))  {  
    alert("valid");
  }else{  
    alert("invalid");  
  }
}

<input type="text" id="email" placeholder="email id">
<input type="button" value="check" onclick="ValidateEmail()"/>

How to validate an email, a user has input, using javascript (not jquery)

3 Answers3