Jak dokonale otestovat emailovou adresu pomocí HTML5?

Testování emailových adres zadaných do formulářů je často velmi protivné, proto HTML5 přichází s novými atributy, které otestují platnost zadané emailové adresy. Pojďme si ukázat jeden nedokonalý a jeden dokonalý způsob, jak emailovou adresu testovat pomocí HTML5.

První nedokonalá verze, za to však univerzálnější

V HTML5 místo hotnoty text atributu type, napíšeme hodnotu email a nakonec doplníme prázdný atribut required, který řekne prohlížeči, že tuto hodnotu je potřeba před odesláním otestovat.

<input type="email" name="email" value="@" required>

To byla základní verze, kterou najdete všude možně po internetu jako doporučovanou s varováním, že každý prohlížeč provádí kontrolu trochu jinak a tak někdy pustí třeba jen email „terka@usata“, jindy kompletní email „terka@usata.info“. Málo kdo, vás ale upozorní na to, že v HTML5 lze u tagu input použít atribut pattern, kterým donutíme pomocí regulérního výraz prohlížeč otestovat úplnou emailovou adresu, bez ohledu na druh internetové prohlížeče.

Dokonalá verze zápisu testující zadaný email

<input type="email" name="email" value="@" required pattern="^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$">

 

Na vaše otázky odpovíme. Nebojte se zeptat.