HTML5 bringt uns einige coole Attribute mit, die uns dabei helfen können Javascript zu sparen – Zuletzt gesehen bei contenteditable und autofocus. Die zwei Attribute, die ich euch Heute vorstellen möchte, treten dabei in dessen Fußstapfen.

Aber Achtung! Diese Attribute sollten keinesfalls als einzige Validationsmaßnahme eingesetzt werden, denn immerhin lassen sich die Technologien im Frontend (sei es nun HTML5 oder Javascript) einfach überlisten bzw. ausschalten.

Das pattern Attribut

Dieses Attribut muss im Zusammenhang mit einem Regulären Ausdruck benutzt werden und überprüft automatisch den eingegebenen Inhalt, ohne das wir einen Finger krumm machen müssen. Das sieht dann etwa folgendermaßen aus:

<input 
   type="text" 
   name="dateiname" 
   pattern="[a-z0-9_-]+\.[a-z]+" 
   title="Bitte einen gültigen Dateinamen + Endung angeben" />

Hier haben wir also ein Input-Feld für einen Dateinamen definiert… Gültige Inhalte sind z.B. „meine-datei.txt“ oder „xyz.zip„. Reguläre Ausdrücke für E-Mail-Adressen, Zahlen oder ein Datum etc. sind nicht Sinnvoll – Dafür gibt es eigene Input-Typen („email„, „number“ oder „date„).

Das title Attribut kann benutzt werden, um eine Meldung zu definieren (Screenshot aus Chrome):

Das required Attribut

Mit Hilfe dieses Attributes können wir das abschicken eines Formulares verhindern, sofern nicht alle definierte Pflichtfelder ausgefüllt sind. Auch hier gilt natürlich wieder „Vertrauen ist gut, Kontrolle ist besser“… Das bedeutet: die Frontend Validierung ist schön und gut, doch wir sollten definitiv nochmals serverseitig validieren.

Die Serverseitige validierung ist übrigens sehr einfach:

$field_data = trim($_POST['required_field']);

// Wir prüfen auf "empty", aber auch "0" um mögliche Fehler zu umgehen.
if (empty($field_data) && $field_data !== '0') {
   // Nun können wir davon ausgehen, dass das Feld leer ist 
   // und eine entsprechende Fehlermeldung zurückliefern.
}

Die Nutzung des eigentlichen Attributes sieht dabei folgendermaßen aus:

<input 
   type="text" 
   name="dateiname"
   title="Bitte einen gültigen Dateinamen + Endung angeben" 
   required/>
<!-- Oder auch ' required="required" '. -->

Auch hier kann das title Attribut benutzt werden (Screenshot aus Chrome):

Prüfen auf Browserkompatibilität

Auch bei diesen beiden Attributen ist das überprüfen auf Kompatibilität relativ einfach:

// Prototype Syntax.
var inp = new Element('input');

if (typeof inp.pattern == 'undefined') {
   // Das "pattern"-Attribut wird nicht unterstützt.
}

if (typeof inp.required == 'undefined') {
   // Das "required"-Attribut wird nicht unterstützt.
}

Tja. Wie es aussieht, war es das bereits für Heute… Ich denke ich werde mir für die kommende Woche ein anderes Thema als HTML5-Attribute suchen – In den letzten Wochen habe ich wieder ein paar Interessante Dinge gefunden!

Ich hoffe ihr schaut wieder rein – Bis dahin wünsche ich euch eine sonnige Woche und natürlich „Happty Coding“!