# Vanilla JavaScript Email Validation

Today I want to address a topic I use quite often but noticed I've never written about.
Email validation! Since my day job is in marketing, we build a lot of pages with forms, and the least we need is an email address. So how do we make sure the input is at least a valid email type in JavaScript?

## HTML Structure

For today's work we'll use a very simple form, with only a email input and a button to submit. Then we'll have a response div to show us if the email was correct.

```html
<div class="container">
  <input type="email" id="emailField" />
  <br />
  <button id="button">Check validation</button>
  <div id="response"></div>
</div>
```

## JavaScript Validating an Email Address

Ok, now on to the fun part, `JavaScript`! Let's start by defining our variables we need to use.

```js
var emailField = document.getElmentById('emailField');
var button = document.getElementById('button');
var response = document.getElementById('response');
```

Awesome, very basic selectors, but enough for this excercise.

Now we want to add a click listener to our button.

```js
button.addEventListener('click', function() {
  var email = emailField.value;
  console.log(email);
});
```

This function will log the value of what we put in the input field.

So for now let's make our actual function to check if it's valid:

```js
function validateEmail(email) {
  const re = /^(([^<>()\[\]\\.,;:\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,}))$/;
  return re.test(String(email).toLowerCase());
}
```

BAM! Please don't be scared; it's a plain old `regular expression` we are using. This will validate a valid email format.

It will return true or false, depending on the state.

So let's implement this back in our button click.

```js
button.addEventListener('click', function() {
  var email = emailField.value;
  if (validateEmail(email)) {
    response.innerHTML = 'Hiya Cowboy, this email will work for us 🤠';
  } else {
    response.innerHTML = 'Sorry, this email is not cool enough 😩';
  }
});
```

There we go! Of course, you would like to do something with this information, but I'll leave that up to you!

View this example on the following Codepen.

%[https://codepen.io/rebelchris/pen/KKzdOJG]

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)