How to get and validate an email address with an HTML form?

About

This article shows you how to handle a email address into a form via an input element

Step by step

The default email type

In HTML, they already have an email type in a input element.

name is the name of the form variable. We choose email but it can be anything you want.

Example:

<input type="email" name="email" placeholder="[email protected]" />

Rendered by WebCode

The HTML built-in validation

The sections below will show how to validate the email via the built-in validation.

OnSubmit

The validation will happen when the user submit the form.

The form

<form>
  <input type="email" name="email" placeholder="[email protected]" autocomplete="off" />
  <button type="submit">Submit</button>
</form>

The result: Enter a bad value and submit

Rendered by WebCode

OnSubmit novalidate

In this validation, we take over the validation of the form with the novalidate form attribute

The form with the novalidate form attribute

<form novalidate>
  <input type="email" name="email" placeholder="[email protected]"/>
  <button type="submit">Submit</button>
</form>

The javascript

document.querySelector("form")
  .addEventListener("submit", (event) => {
     event.preventDefault();
     const emailInput = event.target.email;
     const emailValid = emailInput.validity.valid;
     if(emailValid){
       console.log(`valid: ${emailInput.value}`);
     } else {
       console.log(`invalid: ${emailInput.value}`);
     }
  })

The result:
- Submit with no value and see that the value is valid in the absence of the required validation attribute
- Enter a value and submit

Rendered by WebCode

OnInput

This example shows you live validation when the user enters the value thanks to the input event

The HTML

<input type="email" name="email" placeholder="[email protected]" />

The javascript

document.querySelector('input[type="email"]')
  .addEventListener("input", (event) => {
    // event.target is the input element
    // You may also use `event.target.validity.typeMismatch`
    if (event.target.validity.valid) {
      console.log(`invalid: ${event.target.value}`);
    } else {
      console.log(`valid: ${event.target.value}`);
    }
});

The result: Enter a value, it will be validated.

Rendered by WebCode