pattern attribute does not work well in e-mail type field

Question

I need e-mail type field in HTML5 to validate e-mails containing also letters ñ and Ñ, so I created this input field:

<input autocomplete="off" class="form-control" 
data-val="true" data-val-email="El E-mail ingresado es incorrecto." 
data-val-length="El E-mail debe tener como máximo 80 caracteres." 
data-val-length-max="80" data-val-required="El campo E-mail es obligatorio." 
id="Email" name="Email" 
pattern="^[a-zA-Z0-9ñÑ.!#$%&amp;'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$" 
placeholder="E-mail" required="required" type="email" 
value="kacuña@domain.com">

Test address is kacuña@domain.com.

If I test that regular expression in https://regex101.com/ it works, but not in Chrome. It seems that Chrome does not recognize that attribute.

Is there a way to do that?

Thanks Jaime

Answer 1

To validate international email addresses. I'd suggest using a text field instead, with pattern.

An answer from a a similar question suggest using a more generic solution and I agree.

<input type="text" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" title="Invalid email address" />

It checks if email contains at least one character (also number or whatever except another "@" or whitespace) before "@", at least two characters (or whatever except another "@" or whitespace) after "@" and one dot in between. This pattern does not accept addresses like lol@company, sometimes used in internal networks. But this one could be used, if required:

<input type="text" pattern="[^@\s]+@[^@\s]+" title="Invalid email address" />

Both patterns accepts also less valid emails, for example emails with vertical tab. But for me it's good enough. Stronger checks like trying to connect to mail-server or ping domain should happen anyway on the server side.