Beware of HTML5 email validation of double-byte domains

17 Jun 2010

One of the welcome features of HTML5 is the additional of many more form input types and properties: email, tel, number, etc. Currently only the latest versions of Chrome, Opera and Safari actually validate fields and prevent form submission if something's not right but I've recently discovered a problem with both browsers incorrectly invalidating email with double-byte internationalised domain names (IDNs):

Valid: <input type="email" name="email" value="kyle@example.com">
Invalid: <input type="email" name="email" value="kyle@日本.jp">

Personally I think IDNs are a stupid idea and will lead to the balkanization of the Internet but they should still pass email validation. I suspect IDN email validation isn't working in Chrome, Opera and Safari for a couple of reasons:

• IDNs rely on client software to convert multibyte domains to ASCII before they even touch the Internet. Modern browsers do this when you type a double-byte URL and Chrome, Opera and Safari seem to be doing this with HTML 5 url input but not with email input leading to double-byte email domains being passed raw for validation.
• Double-byte characters are not recognised by RegEx as \w so fail the domain name search used by almost all RegEx email validators: ([\w-\.]+)@((?:[\w]+\.)+)([a-zA-Z]{2,4}). Chrome, Opera and Safari are probably using something like this to validate email so will mark any raw double-byte domain as invalid.

The simple solution is for Chrome, Opera and Safari to apply the same double-byte to ASCII conversion it applies to URLs to email but until this happens, a simple workaround is to use text input type with a looser HTML5 pattern property instead of the email input type:

<input type="text" name="email" value="kyle@日本.jp" pattern="[^ @]*@[^ @]*">