Validating email address with HTML5

Posted on
Contents

If you have a form on your site requesting a users email address, then you should always use type="email" rather than type="text". This will allow the browser to check if it is valid using RFC 5322 .

It doesn’t check if an email address is using a valid TLD though. The pattern HTML5 form attribute allows us to set a regex to check the input so it’s possible to use a list of valid TLDs to check against.

I scraped the official list of TLDS and put it in to a pattern to create an email address validator (which includes checking a valid TLD is used) in pure HTML with no JavaScript or dependencies. It could be used to improve the user experience by rejecting mistyped email addresses.

Where can I see a demo?

https://coliff.github.io/html5-email-regex/

Is it safe to use?

Kind of, but a few points:

  • You should always do server-side validation in addition to any front-end validation.

  • There are new TLDs added regularly so if you don’t keep the pattern regex up-to-date you may exclude newer TLDs.

  • Some older browsers such as Internet Explorer 9 and below and Android 4.4 browser and below don’t support the pattern attribute. iOS prior to 10.3 and Safari for MacOS prior to 10.1 still allow forms to be submitted even if the pattern is incorrect. Check https://caniuse.com/#feat=input-pattern for more details.

  • It doesn’t give meaningful feedback if an email address is mistyped. So if someone enters jane@gmail.con they’ll get an invalid message, but won’t specify that the TLD is incorrect. I’ve used Verimail and Mailcheck with success before to give inline feedback on mistyped email addresses.

  • Always use type="email" rather than type="text" to take advantage of browser-based validation and feedback and provide hints to autocomplete/autofill users email address.

  • Add autocomplete="email" to help browsers with autocomplete/autofill.

  • For good measure, consider adding maxlength="256" as no email address can be longer.

  • If it’s an order form/contact form or similar add the required tag to prevent submissions when this field is empty.

How did you get the list of valid TLDs?

I scraped the official list with this command: $ curl -s https://data.iana.org/TLD/tlds-alpha-by-domain.txt | sed '1d; s/^ *//; s/ *$//; /^$/d' | awk '{print length" "$0}' | sort -rn | cut -d' ' -f2- | tr '\n' '|' | tr '[:upper:]' '[:lower:]' | sed 's/\(.*\)./\1/'

and copied the output to the pattern attribute which resulted in:

Further Reading

https://emailregex.com/

You might also like