5 Ways to Implement Email Validation in HTML

Validating email addresses in HTML is a key part of maintaining clean data. We will explore three common ways to add this check, providing working code for each. Then, we'll look into the pitfalls of these methods and show how Abstract API effectively addresses them.

How to Implement Email Validation in HTML

These methods use built-in browser features and JavaScript to check email addresses directly within your HTML form. This improves user experience and helps maintain data quality from the start.

The Native Input Element

HTML5 provides a specific input type for email. When you set the "type" attribute to "email", the browser automatically checks the input against standard email syntax without any need for JavaScript. The browser parses the value based on WHATWG email grammar.

It exposes errors through the constraint-validation API. A syntax error, for example, sets the "typeMismatch" property to true. This check runs when the user leaves the input, submits the form, or when you call the "reportValidity()" method. Mobile browsers also show an "@"-optimized keyboard.

  <form>  
    <input id="workMail" type="email" required autocomplete="email">  
    <button>Send</button>  
  </form>

The Pattern Attribute

You can add another validation layer with the pattern attribute. This attribute lets you specify a regular expression that the input value must match. The browser evaluates this pattern after it performs the built-in syntax check for the email type.

If the value is a syntactically correct email but fails the pattern, the browser flags a "patternMismatch" on the element's validity state. This is useful for specific rules, like a domain whitelist. The regular expression must match the entire input string.

  <input id="corpMail"  
         type="email"  
         pattern=".+@beststartupever\.com"  
         title="Use your company address"  
         required>

JavaScript and the Constraint Validation API

For more control, you can use JavaScript with the Constraint Validation API. The element's "validity" property gives you detailed flags about the input's state, such as "valueMissing" or "typeMismatch". You can create custom validation logic based on these flags.

With the "setCustomValidity" method, you can define your own error messages. For instance, you could suggest a correction for a common typo like ".con" instead of ".com". To display these messages, you call the "reportValidity" method, which shows feedback without a block on the form submission process.

  const f = document.querySelector('form');  
  const mail = f.elements.email;  
  mail.addEventListener('input', () => {  
    if (mail.validity.typeMismatch) {  
      mail.setCustomValidity('Not a valid address');  
    } else if (mail.value.endsWith('.con')) {  
      mail.setCustomValidity('Did you mean “.com”?');  
    } else {  
      mail.setCustomValidity('');  
    }  
    mail.reportValidity();  
  });

Challenges of HTML Email Validation

While client-side checks offer immediate feedback, they come with significant limitations. These methods often create a false sense of security and can fall short when faced with real-world email address variations.

• The vast RFC syntax for emails means built-in constraints and pattern attributes often fail. They may block valid addresses with unusual formats or permit invalid ones, which creates unreliable results.
• Browser validation engines differ. An address that passes on one browser might fail on another due to inconsistent regex parsers. This makes client-side checks with the pattern attribute or native input nondeterministic.
• Internationalized mail with non-ASCII characters poses a problem. Browser inconsistencies with these formats often cause HTML validation to reject or incorrectly rewrite valid international email addresses, which requires server-side fixes.
• HTML validation only inspects syntax. Methods like the native input, pattern attribute, or JavaScript API cannot confirm if an address is deliverable. A syntactically correct but fake email will pass.