Input type email value in Chrome with accented characters wrong

Question

When entering accented characters into an input type email in Chrome, it changes the value to something strange.

When entering the email: test@Bücher.ch th

Answer 1

I think it's not an error, it's because of the specification. Chrome just follows the specification in a different way than other browsers:) and translate the IDN into its ascii representation.

https://code.google.com/p/chromium/issues/detail?id=410937

To decode it back you can use some 3rd party solution such as

Converting punycode with dash character to Unicode

Answer 2

Fiddle

<form>
    <input id="email2" type="text"placeholder="your@email.com" autofocus required pattern="[^ @]*@[^ @]*">
    <input type ="submit">
</form>

For this problem it is because of input's email type, after '@' sign browser gives this error. I think they believe email adresses always must be in English.

Anyway Use text type then provide email regex

Answer 3

For others who face this problem again, I suggest use punycode npm package. https://www.npmjs.com/package/punycode

I think only Chrome encodes email into punycode. There is no way to prevent Chrome from punycoding. You just let her do her work and decode punycode in backend.

const punycode = require('punycode')
let data = request.only(['email'])
data['email'] = punycode.toUnicode(data['email'])

Worked like charm in adonis and my headache disappeared.