HTML5 Form Email Input Validation
How to validate an email address with and without international characters (Unicode).
HTML5 Email Validation using <input type="email">
The easiest way is to use the type="email" input type provided in HTML5.
However, there are issues with the validation of international characters.
HTML Sample Code:
<form ...>
...
<label
for="email">Email:</label>
<input type="email"
name="email" id="email">
...
</form>
Let's test some email addresses:
someone@example.com
Result: email=someone@example.com
tanja@müllenhöfer-beispiel.de (Umlaut in domain name)
Result: email=tanja@xn--mllenhfer-beispiel-i3b8i.de
tanja.müller@example.com (Umlaut in local name)
Result: Error: The umlaut
"ü" must not appear in the local name.
pelé@example.com (Latin alphabet
with diacritics)
Result: Error: The diacritic "é" must not appear in the
local name.
s10023@屋企.香港 (Traditional Chinese characters in domain name)
Result: email=s10023@xn--hoqu73a.xn--j6w193g
我買@屋企.香港 (Traditional Chinese
characters in local name and domain name)
Result: Error: The character "我"
must not appear in the local name.
International characters in the domain name are converted to Punycode and international characters in the local name are displayed as errors. The example addresses with international characters in the local name would not be processed by RFC 5322 based servers, but are allowed by RFC 6530. So if you not only want to collect the email addresses, but also want to send an email to them, you should first check whether your server also supports these email addresses.
You can find more information about email addresses here: https://en.wikipedia.org/wiki/Email_address open_in_new
HTML5 Pattern Email Validation
If you also want to include international characters in the local name or do not want automatic conversion to Punycode, you can use an HTML5 pattern to validate the email address.
HTML5 Pattern for Validating International Email Addresses (relaxed pattern):
^[^@,;:\x22\s<>\(\)\[\]]+@[^@,;:\s\x22\x27<>\(\)\[\]+!#$%&]+\.[^@,;:\s\x22\x27<>\(\)\[\]+!#$%&]+?$
HTML Sample Code:
<form ...>
...
<label
for="email">Email:</label>
<input type="text" pattern="^[^@,;:\x22\s<>\(\)\[\]]+@[^@,;:\s\x22\x27<>\(\)\[\]+!#$%&]+\.[^@,;:\s\x22\x27<>\(\)\[\]+!#$%&]+?$"
name="email" id="email">
...
</form>
Please note the following: If you not only want to collect the email addresses, but also want to send an email to them, you should first check whether your server also supports these email addresses. The support of international characters depends on the mail server used, or which RFC the mail server supports.
Mobile Devices
Mobile devices often add a space to the email address when inserting
email addresses via autocomplete.
To allow this, you can adapt or extend
the HTML5 pattern accordingly.
The following HTML5 pattern (regular expression) is used in our program Arclab® Web Form Builder open_in_new.
^[^@,;:\x22\s<>\(\)\[\]]+@[^@,;:\s\x22\x27<>\(\)\[\]+!#$%&]+\.[^@,;:\s\x22\x27<>\(\)\[\]+!#$%&]+ ?$
"+ ?$" instead of "+$" in the pattern
allows one optional space at the end.
When processing the email
address, you must of course trim the additional space.