¿Por qué la validación de formularios HTML5 permite correos electrónicos sin un punto?

Estoy escribiendo una maqueta muy simple para demostrar algo de validación de formularios HTML5. Sin embargo, noté que la validación de correo electrónico no verifica un punto en la dirección, ni busca caracteres después de dicho punto.

En otras palabras, "john @ doe" se considera válido, cuando claramente no es una dirección de correo electrónico válida; "doe" no es un dominio.

Así es como estoy codificando mi campo de correo electrónico:

<input type="email" required />

¿No es suficiente?

Mira este violín para ver a qué me refiero.

Nota: sé cómo lograr esto a través de un patrón RegEx. Me pregunto cómo alguien podría salirse con la suya usando el tipo de correo electrónico.

Porque a @ b es una dirección de correo electrónico válida (por ejemplo, localhost es un dominio válido). Ver http://en.wikipedia.org/wiki/Email_address#Examples

Además, tenga en cuenta que siempre debe realizar la validación de entrada en el servidor. La validación del lado del cliente debe ser solo para dar retroalimentación al usuario y no ser confiable, ya que se puede omitir fácilmente.

En teoría, puede tener una dirección sin un "." en.

Dado que técnicamente cosas como:

user@com
user@localserver
user@[IPv6:2001:db8::1]

Son todos correos electrónicos válidos.

Por lo tanto, la validación estándar de HTML5 permite todos los correos electrónicos válidos, incluidos los poco comunes.

Para obtener explicaciones fáciles de leer (en lugar de leer los estándares): http://en.wikipedia.org/wiki/Email_address#Examples

Intente agregar esto a la entrada

pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$"

Violín

El RFC 822 , capítulo 6, proporciona la especificación de una dirección en forma aumentada Backus-Naur (BNF):

addr-spec   =  local-part "@" domain
local-part  =  word *("." word)
domain      =  sub-domain *("." sub-domain)

El uso de esta especificación a@bes una dirección válida.

ACTUALIZAR

Para responder al comentario de Trejkaz, agrego las siguientes definiciones. Vemos que se permite el ESPACIO pero solo entre comillas.

word          =  atom / quoted-string
atom          =  1*<any CHAR except specials, SPACE and CTLs>
quoted-string = <"> *(qtext/quoted-pair) <">
SPACE         =  <ASCII SP, space>
CTL           =  <any ASCII control character and DEL> 
qtext         =  <any CHAR excepting <">, "\" & CR, and including linear-white-space>
quoted-pair   =  "\" CHAR  

En esta página de MDN, muestra las expresiones regulares que los navegadores deben usar para validar el correo electrónico:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#Validation

Puede cambiar ligeramente esta expresión regular para requerir al menos un punto en el nombre de dominio: cambie la estrella *al final de la expresión regular a un signo más +. Luego use esa expresión regular como patternatributo:

<input type="email" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[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])?)+$"></input>

Puede personalizar el patrón del campo de correo electrónico:

input:valid {
  border-color: green
}

input:invalid {
  border-color: red
}

Email:
<input type="email" required value="[email protected]" /><br>

Non-dots Email:
<input type="email" required pattern="[^.]+@[^.]+" value="[email protected]" />

Así es como puede hacerlo con html5 usando el patrón de expresiones regulares. También puede incluir un mensaje personalizado para mostrar.

<form>
  <input type="email" value="paul@test" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$" title="Hey, you are missing domain part in the email !!!"/>
  <button type="submit">Click Me</button>
</form>

Este patrón siempre me funciona.

El texto debe estar en minúsculas, pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"pero creo que cubre más o menos la mayoría de los correos electrónicos.