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


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.


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

The HTML built-in validation

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


The validation will happen when the user submit the form.

  • The form
  <input type="email" name="email" placeholder="[email protected]" autocomplete="off" />
  <button type="submit">Submit</button>
  • The result: Enter a bad value and submit

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>
  • The javascript
  .addEventListener("submit", (event) => {
     const emailInput =;
     const emailValid = emailInput.validity.valid;
       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


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
  .addEventListener("input", (event) => {
    // is the input element
    // You may also use ``
    if ( {
      console.log(`invalid: ${}`);
    } else {
      console.log(`valid: ${}`);
  • The result: Enter a value, it will be validated.

Discover More
What are HTML Input Elements?

An inputinput element of a form control that permits to define a scalar value (single value) inputFull list Ref Doc The type attribute defined: the default behavior the design of the element....
What is the Native Form Validation ( HTML only)?

This page is browser native form validation in HTML. The javascript counterpart is called the constraint validation API . In short, you set: the type (input type attribute) and standard HTML attributes...

Share this page:
Follow us:
Task Runner