Optimierung - Wie können Formulareingaben validiert werden?

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie können Formulareingaben mit HTML5 validiert werden?

23Jul2018

Formulareingaben mit HTML5 validieren


Ein großer Vorteil ist es, wenn bereits vor dem Absenden einer Kontaktanfrage die Eingaben clientseitig auf Validität überprüft werden. HTML5 (HyperText Markup Language) bietet einige Möglichkeiten, Eingaben von input-Elementen bereits während der Eingabe zu validieren. Falsche Eingaben sind dadurch für den Benutzer direkt sichtbar und er kann diese vor dem Absenden ändern oder ergänzen.

Um valide Daten zu erhalten, ist es aber empfehlenswert, dem Benutzer schon vor der Eingabe Hinweise zur richtigen Eingabe zu geben. Ohne eine aussagekräftige Beschriftung, die auch von jedem Benutzer verstanden wird, können Formulare nicht immer richtig ausgefüllt werden. Aus diesem Grund ist es wichtig beim Ausfüllen des Formulars Hilfen anzugeben.

Aber zuerst ein paar grundsätzliche Erklärungen von "input-Elementen".


Was ist ein label-Element?

Um zwischen Beschriftung und Eingabefeld eine logische Verbindung zu schaffen, existiert das label-Element.

Der Vorteil liegt darin, dass Sie nicht mehr zwingend mit der Maus in ein Eingabefeld klicken müssen, sondern Sie können auch auf dessen Beschriftung klicken, um das Eingabefeld zu erreichen. Der Textcursor landet im passenden Eingabefeld und die Barrierefreiheit wird dadurch erheblich verbessert.

Klicken Sie unten zum Beispiel auf den Text "Irgendein Text", springen Sie automatisch in das zugehörige Eingabefeld.


Vorgehensweise beim programmieren des label-Element:

Die logische Verbindung wird durch die gleiche Bezeichnung des for-Attribut im label-Element und dem id-Attribut des Formularfeldes erzeugt. Die zugehörigen HTML (HyperText Markup Language)-Zeilen sehen wie folgt aus:

<label for="labeltest">
    Irgendein Text:
</label>
<br>
<input type="text" name="labeltest" id="labeltest" value="Eingabe"
       size="13" title="Text hier eingeben">

Die Art des Eingabefeldes wird über das type-Attribut festgelegt und der Standardwert ist "text". Ein fehlendes type-Attribut ist also gleichbedeutend mit type = "text".
Das title-Attribut sorgt beim Überfahren des Eingabefeldes mit der Maus für einen Tool-Tipp-Text.
Damit auf der Serverseite der eingegebene Inhalt "verstanden" werden kann, wird das name-Attribut benötigt. Die Browser versenden nämlich Paare aus "name-Attribut" und "value-Attribut". Nur so kann der Server die einzelnen Eingaben auseinander halten.
Mit dem value-Attribut wird ein vordefinierter Text in das Eingabefeld geschrieben. Der Nachteil bei dieser Methode ist aber, dass beim Reinklicken in das Eingabefeld der Cursor hinter dem vordefinierten Text steht!
Stattdessen kann man das placeholder-Attribut einsetzen. Das "value-Attribut" wird dann nicht beschrieben. Das Ergebnis: Hier erscheint der Cursor vor dem vordefinierten Text und durch die Eingabe wird die Vorgabe überschrieben.


<label for="labeltest2">
    Irgendein zweiter Text:
</label>
<br>
<input type="text" name="labeltest2" id="labeltest2" value=""
      placeholder="Eingabe" size="13" title="Text hier eingeben">

Und damit beim Überfahren des Textes die Hand erscheint ist eine zusätzliche Zeile in CSS (Cascading Style Sheet) notwendig:

label {
    cursor: pointer;
}

Pflichtfelder

Die Pflichtfelder in unserem Kontaktformuar hatte ich bisher nur durch einen zusätzlichen Text "(Pflichtfeld)" gekennzeichnet. Nun erhalten alle Pflichtfelder in unserem Kontaktformular das required (englisch für erforderlich oder notwendig)-Attribut. Solange die Eingaben nicht korrekt sind, wird ein Absenden des Formulars verhindert und eine Fehlermeldung ausgegeben.

Damit konnte ich einige serverseitigen Abfragen, ob die Datenschutzerklärung gelesen wurde, oder der Nachname oder eine Nachricht in unserem Kontaktformular eingegeben wurde, entfallen lassen. Der HTML (HyperText Markup Language)-Code wird dadurch wieder um einige Zeilen übersichtlicher!
Gelöscht habe ich zum Beispiel das Überprüfen der Eingabe beim Nachnamen oder die Kenntnisnahme der Datenschutzerklärung und die jeweilige Fehlermeldung:

<?php
    if($nachname == "") {
        $msg .= '- Ihren Nachnamen';
        $error = true;
    }

    ...

    if (isset($_POST['schutz'])) {
    }else{
        $msg .= '- Kenntnisnahme der Datenschutzerklärung';
        $error = true;
    }
?>

Bei den Pflichtfeldern in unserem Kontaktformular habe ich nun also das required (englisch für erforderlich oder notwendig)-Attribut gesetzt. Das input-Element des Nachnamen oder die Checkbox zur Datenschutzerklärung sehen damit wie folgt aus:

<label for="nachname">
    Ihr Nachname:
    <span class="klein">
        (Pflichtfeld)
    </span>
</label>
<input type="text" name="nachname" id="nachname" value="" size="40"
       maxlength="55" title="Bitte geben Sie hier Ihren Nachnamen ein"
       required>
<br>
<input type="checkbox" id="schutz" name="schutz" value="ja" required>
<label for="schutz">
    Ich habe die Datenschutzerklärung zur Kenntnis genommen.
    <span class="klein">
        (Pflichtfeld)
    </span>
</label>
<br>
<button type="submit" value="Pflichtfelder absenden"
        name="send" title="Pflichtfelder absenden">
        Pflichtfelder absenden
</button>

Wenn Sie unten den Button "Pflichtfelder absenden" betätigen, kommt der Hinweis dass sie das Feld "Nachname" ausfüllen müssen. Nach Eingabe eines Textes und erneutem Drücken des Button "Pflichtfelder absenden" werden Sie darauf hingewiesen das Kontrollkästchen zu aktiverien". Erst danach können sie die Pflichtfelder absenden und sie landen wieder neu auf dieser Seite.
Hier wird also der Benutzer darauf hingewiesen dass er Fehler macht.

Pflichtfelder!


input type = "email"

Mit input type = "email" ist es möglich eine E-Mail-Adressen einzugeben. Schon während der Eingabe wird überprüft, ob die Eingabe eine gültige E-Mail-Adresse ist. Es wird zum Beispiel überprüft ob das @-Symbol vorhanden ist und außer einem Punkt hinter dem @-Symbol werden alle Satzzeichen angemeckert. So wird bereits clientseitig eine browsereigene Vorprüfung vorgenommen, und eine weitere serverseitige Abfrage kann entfallen.
Bei mobilen Geräten (iOS, Android) erscheint bei der Eingabe das @-Symbol automatisch im Tastenfeld.

In unserem Kontaktformular konnte ich die Abfrage und Überprüfung einer E-Mail-Adresse und die Auswertung des Fehlers löschen, denn die erfolgt nun direkt per HTML (HyperText Markup Language). Die Abfrage nach einem Fehler beim Senden kann dadurch ebenfalls entfallen, denn es wird keinen mehr geben.

<?php
    if (isset($_POST['kopie'])) {
        if($email == "") {
            $msg .= '- Ihre E-Mail-Adresse';
            $error = true;
        }else{
        if (preg_match ("/(@.*@)|(\.\.)|(@\.)|(\.@)|(^\.)/", $email) ||
            !preg_match ("/^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|
            [0-9]{1,3})(\]?)$/", $email)) {
                $msg .= '- Das ist keine richtige E-Mail-Adresse';
                $error = true;
            }
        }
    }
?>

In dem Zusammenhang habe ich auch die Checkbox "Ich wünsche eine Kopie meiner Nachricht an meine E-Mail-Adresse" entfernt, denn der Absender gibt entweder eine E-Mail-Adresse ein oder nicht.
Die Checkbox in unserem Kontaktformular sah wie folgt aus:

<input type="checkbox" id="kopie" name="kopie" value="ja">
<label for="kopie">
    Ich wünsche eine Kopie meiner Nachricht an meine E-Mail-Adresse.
</label>

Das Eingabefeld für die E-Mail-Adresse ist nun mit dem richtigen Eingabetyp verknüpft.

E-Mail-Adresse!

Während der Eingabe wechselt die Schrift solange auf "rot" bis das @-Zeichen und weitere Buchstaben eingegeben werden.
In HTML (HyperText Markup Language) sieht es dann wie folgt aus:

<label for="email">
    E-Mail-Adresse:
    <span class="klein">
        (Pflichtfeld, wenn ich Sie per E-Mail erreichen soll)
    </span>
</label>
<br>
<input type="email" name="email" id="email" value="" size="40"
       maxlength="55" title="Bitte geben Sie hier Ihre E-Mail-Adresse ein">

input type = "tel"

Ein weiterer nützlicher Eingabetyp ist input type = "tel". Dieser Typ wird verwendet, um dem Bediener die Eingabe und Bearbeitung einer Telefonnummer zu ermöglichen.
Im Gegensatz zu type = "email" wird der Eingabewert aber leider nicht automatisch für ein bestimmtes Format validiert, bevor das Formular übermittelt werden kann. Der Grund sind die unterschiedlichen Formate für die weltweiten Telefonnummern.

Browser, die den type = "tel" nicht unterstützen, wechseln automatisch zu der Standardeingabe type = "text". Mobile Browser - insbesondere auf Mobiltelefonen - bieten automatisch ein benutzerdefiniertes Tastenfeld zur Eingabe der Telefonnummer an.

Durch die Verwendung dieses Eingabetyps für Telefonnummern wird auch das Hinzufügen benutzerdefinierter Validierungen und die Handhabung von Telefonnummern bequemer. Da der Typ nicht automatisch validiert wird, benutze ich noch zusätzlich das Attribut "pattern".

Das "pattern"-Attribut definiert einen regulären Ausdruck, für den der Wert des Elements input überprüft wird. Und damit es der Bediener einfacher hat, verwende ich das Titelattribut des Eingabefeldes, um das Format der Eingabe genauer zu beschreiben.
Gehen Sie unten mit der Maus über das Eingabefeld und der Hilfstext wird eingeblendet.

Das Eingabefeld für die Telefonnumer ist nun ebenfalls mit dem richtigen Eingabetyp verknüpft.

Telefonnummer!

Während der Eingabe wechselt die Schrift solange auf "rot" bis mindestens 4 Zahlen eingegeben wurden.
In HTML (HyperText Markup Language) sieht es dann wie folgt aus:

<label for="telefon">
    Telefonnummer:
    <span class="klein">
        (Pflichtfeld, wenn ich Sie anrufen soll)
    </span>
</label>
<input type="tel" name="telefon" id="telefon" value="" size="40"
    maxlength="55" title="Bitte geben Sie hier Ihre Telefonnummer ein -
    mindestens vier Ziffern" pattern="[0-9]{4,}">

Validierung der Eingabe

Wie bereits geschrieben, ist es sinnvoll die Pflichtfelder zu kennzeichnen. Also nicht nur durch einen reinen Text (Pflichtfeld) sondern auch durch einen Asterisk ★ in rot. Dieser fällt direkt ins Auge und der Benutzer wird durch eine Änderung der Kennzeichnung, zum Beispiel durch einen grünen Haken ✔, direkt darüber in Kenntnis gesetzt, dass die Eingabe valide ist. Hiermit erreicht man also Beides, den Hinweis der Pflichtfelder und die Kennzeichnung dass die Eingaben korrekt sind!
Durch die Verwendung der Pseudoklassen :valid, :invalid wird die Eingabe überprüft und die Kennzeichnung (★ beziehungsweise ✔) erfolgt durch ::before-Pseudoelemente der label-Elemente.

Achtung!
Die Reihenfolge im Markup musste ich ändern, weil ein "input-Element" als "Ersetztes Element (engl. Replaced Element)" keinen Inhalt haben darf. Das heißt zuerst folgt das "input-Element" und dann das "label-Element". Und bei dem "label-Element" erfolgt dann die Kennzeichnung (★ beziehungsweise ✔).

Validierung der Eingabe

Bitte wählen Sie aus, wie ich mich bei Ihnen melden soll.






Das HTML (HyperText Markup Language) für dieses Beispiel.

<form action="/codeschnipsel/formulareingaben.php" method="post"
    accept-charset="UTF-8">
    <fieldset class="form4">
        <legend>
            Validierung der Eingabe
        </legend>
        <input type="text" name="nachname2" id="nachname2" value="" size="40"
            maxlength="55" title="Bitte geben Sie hier Ihren Nachnamen ein"
            required>
            <label for="nachname2">
                Ihr Nachname:
            </label>
        <br>
        <p class="klein">
            Bitte wählen Sie aus, wie ich mich bei Ihnen melden soll.
        </p>
        <input type="tel" name="telefon" id="telefon" value="" size="40"
            maxlength="55"
            title="Bitte geben Sie hier Ihre Telefonnummer ein - 
            mindestens vier Ziffern, ohne Leerzeichen oder andere Zeichen"
            pattern="[0-9]{4,}" required>
            <label for="telefon">
                Telefonnummer:
            </label>
        <br>
        <input type="email" name="email" id="email" value="" size="40"
            maxlength="55" title="Bitte geben Sie hier Ihre E-Mail-Adresse ein"
            required>
            <label for="email">
                E-Mail-Adresse:
            </label>
        <br>
        <input type="checkbox" id="schutz2" name="schutz2" value="ja"
            required>
            <label class="oben" for="schutz2">
                Ich habe die Datenschutzerklärung zur Kenntnis genommen.
            </label>
        <br>
        <br>
        <br>
        <button type="submit" value="Validierung abgeschlossen"
            name="send2" title="Validierung abgeschlossen">
            Validierung abgeschlossen
        </button>
    </fieldset>
</form>

Und das CSS (Cascading Style Sheet) für dieses Beispiel.

.form4 {
    border: solid 1px #000;
    color: #5f5f5f;
    padding: 1em;
    width: 92%;
    position: relative;
}

.form4 input {
    background: #ddd;
    border: 1px solid #000;
    color: #5f5f5f;
    font: .9em 'Comic Sans MS';
    padding: .3em .2em .2em .7em;
    transition: .5s;
}

.form4 input {
    width: 45%;
    margin: 0 0 1em 36%;
}

input[type=checkbox]:checked+label {
    border-bottom: 1px solid green;
    color: green;
}

.form4 input:hover,
.form4 input:focus {
    background: #fff8dc;
    border: solid 1px #222;
    box-shadow: 0 0 8px rgba(25,25,25,.5);
    outline: none;
}

.form4 label,
.klein {
    color: #4d4d4d;
    font: .8em Arial;
}

.form4 label {
    text-align: right;
    line-height: 2.5;
    width: 35%;
    position: absolute;
    left: 0;
}

.form4 .oben {
    line-height: 1.5;
}

.form4 legend {
    color: #000;
}

.form4 input:required + label::before {
    position: absolute;
    left: 225%;
    content: "★";
    color: red;
}

.form4 input[type=checkbox]:required + label::before {
    position: absolute;
    left: 112%;
}

.form4 input:required:valid + label::before {
    content: "✔";
    color: green;
}

Damit habe ich unser Kontaktformular wieder etwas bedienerfreundlicher gestaltet.

Zum Seitenanfang springen Λ