eMail-Adressen überprüfen

Einer der neuen Werte für das Typ-Attribut ist email. Wenn man sein input Feld statt als regulären Text als email definiert, benutzt der Browser regular expressions um zu überprüfen ob das, was der Nutzer eingegeben hat wirklich eine eMail-Adresse ist. Heißt das, der Nutzer kann keine Fake-eMail-Adressen eingeben? Nein! Eine richtige Überprüfung der eMail-Adresse findet nicht statt, man muss sich nur keine Sorgen mehr darum machen, dass ein Nutzer ein Komma statt eines Punktes oder ein Leerzeichen eingibt. Egal was der Nutzer eingibt, es sieht zumindest aus wie eine eMail-Adresse. Und so sieht das im Markup aus:

<form>
	<input type="email" required /> <br />
	<input type="submit" value="Submit Now!">
</form>

Manche Browser schauen nur auf das @ und andere nur nach einem Muster, dass ein @ gefolgt von mindestens einem Zeichen und einem Punkt beinhaltet.

Derzeit wird dies durch z.B. den Internet Explorer 9.0 und früher oder von den Android Browsern noch nicht unterstützt (Zeitpunkt der Erstellung des Artikels). Das heißt, wenn man eine gültige eMail Überprüfung erhalten möchte, muss man ein wenig basteln um es in allen Browsern ans laufen zu bekommen. Es heißt nicht, dass man das Attribut email nicht implementieren sollte, da wenn der Browser das type="email" nicht erkennt wird er es einfach als type="text" auslegen und es als normalen Text behandeln.

Muster nutzen um eine eMail Adresse zu überprüfen

Ein anderer Weg eMail-Adressen zu überprüfen ist mit dem pattern Attribut. Wie im Kapitel über Muster erwähnt, kann ein Muster alles sein das der Entwickler festlegt und es basier auf regular expressions. Ich werde in diesem Zusammenhang nicht weiter auf das Thema regular expressions eingehen.

Alles was man im Zusammenhang mit Mustern wissen muss, ist welches Muster man nutzen muss um eMail Adressen zu überprüfen. Das folgende HTML5 eMail Adressen regular expressions Muster ist in etwa das wie es aussehen könnte. (Dank an Gervase Markham). Und so sieht das dann aus:

/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

Wie man sieht ist so ein Muster sehr kompliziert, aber im Endeffekt schaut es nur, ob eine Eingabe wie eine eMail-Adresse aussieht, wie z.B. janedoe@unknown.com

<form>
	<input pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" required />
	<br />
	<input type="submit" value="Submit Now!">
</form>

type="email" oder Muster?

Da beide Wege ihr für und wider haben, ist es einem selbst überlassen für welche Art man sich entscheidet. Man sollte nicht versuchen beide gleichzeitig zu verwenden, da dies in Browsern, die beide Arten unterstützen zu Fehlern führt. Wenn man type="email" nutzt hat man den Vorteil, dass man das semantisch korrektere nutzt. Nutzt man die Muster, wird man im Internet viele einfach zu benutzende polyfills finden und vielleicht auch einen größeren Endnutzerkreis ansprechen können.

Was wir gelernt haben

• Der semantisch korrekte Weg eMail-Adressen zu überprüfen ist es das type Attribut als type="email" zu setzen.
• Nicht alle Brwoser nutzen das gleiche Schema um eMail-Adressen zu überprüfen
• Man kann auch das pattern Attribut nutzen um eMail-Adressen zu überprüfen
• Das type="email" ist der semantisch korrekte HTML5 Weg, wohingegen das pattern Attribut eine genauere Überprüfung in mehr Browsern ermöglicht.
• Das pattern Attribut kann unterstützt werden durch Nutzung eines polyfills