Perché la convalida del modulo HTML5 consente le e-mail senza punto?

Sto scrivendo un modello molto semplice per dimostrare la convalida di un modulo HTML5. Tuttavia, ho notato che la convalida dell'email non verifica la presenza di un punto nell'indirizzo, né verifica la presenza di caratteri dopo tale punto.

In altre parole, "john @ doe" è considerato valido, quando chiaramente non è un indirizzo email valido; "doe" non è un dominio.

Ecco come codifico il mio campo email:

<input type="email" required />

Non è abbastanza?

Controlla questo violino per vedere cosa intendo.

Nota: so invece come farlo tramite un pattern RegEx. Mi chiedo solo come qualcuno potrebbe farla franca usando invece il tipo di email.

Perché a @ b è un indirizzo email valido (ad es. Localhost è un dominio valido). Vedi http://en.wikipedia.org/wiki/Email_address#Examples

Inoltre, tieni presente che dovresti sempre eseguire la convalida dell'input nel server. La convalida lato client dovrebbe essere solo per fornire feedback all'utente e non essere affidabile, poiché può essere facilmente aggirata.

In teoria puoi avere un indirizzo senza "." nel.

Dal momento che tecnicamente cose come:

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

Sono tutte email valide.

Quindi la convalida HTML5 standard consente tutte le e-mail valide, comprese quelle non comuni.

Per alcune spiegazioni di facile lettura (invece di leggere gli standard): http://en.wikipedia.org/wiki/Email_address#Examples

Prova ad aggiungerlo all'input

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

Violino

L' RFC 822 , capitolo 6, fornisce la specifica di un indirizzo in formato Backus-Naur aumentato (BNF):

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

L'utilizzo di questa specifica a@bè un indirizzo valido.

AGGIORNARE

Per rispondere al commento di Trejkaz, aggiungo le seguenti definizioni. Vediamo che lo SPAZIO è consentito ma solo tra virgolette.

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  

In questa pagina MDN mostra che i browser regex dovrebbero utilizzare per convalidare l'email:

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

Puoi modificare leggermente questa regex per richiedere almeno un punto nel nome del dominio: cambia la stella *alla fine della regex in un più +. Quindi usa quella regex come patternattributo:

<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>

Puoi personalizzare lo schema del campo email:

input:valid {
  border-color: green
}

input:invalid {
  border-color: red
}

Email:
<input type="email" required value="a@b.c" /><br>

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

Ecco come puoi farlo con html5 usando il pattern regex. Puoi anche includere un messaggio personalizzato da visualizzare.

<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>

Questo modello funziona sempre per me.

Il testo deve essere in minuscolo pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"ma penso che copra più o meno la maggior parte delle email.