HTML/Tutorials/Formulare/browsereigene Validierung mit HTML5

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Es ist sinnvoll, HTML-basierte Formulare nicht erst serverseitig, sondern zusätzlich schon vor dem Absenden clientseitig auf Validität zu überprüfen. HTML5 bietet einige Möglichkeiten, Eingaben von input-Elementen bereits während der Eingabe zu validieren. Auch wenn diese Validierungen eine spätere serverseitige Überprüfung nicht ersetzen, werden falsche Eingaben sofort durch CSS sichtbar gemacht und können ohne weitere HTTP-Requests korrigiert werden. Die Pseudoklassen :valid für gültige und :invalid für falsche Eingaben selektieren Formularelemente auf die Gültigkeit einer Eingabe hin. Das Ergebnis kann mit den Möglichkeiten von CSS entsprechend angezeigt werden.

Beachten Sie: Eine clientseitige Validierung von Formulardaten kann lediglich den Bedienkomfort für den Nutzer erhöhen, indem das Absenden ungeeigneter Daten zu vermeiden versucht wird.

Achtung!

Die serverseitige Validierung der übermittelten Daten ist trotzdem unbedingt notwendig.

Verschiedene input-Typen[Bearbeiten]

Eingabefelder für Passwörter (mit type="password") sind schon aus dem vorigen Kapitel bekannt. Sie ermöglichen die verdeckte Eingabe beliebiger Zeichen. Nach dem Absenden des Formulars werden sie serverseitig überprüft.

Mit HTML5 wurden für das input-Element neue Typen eingeführt, die ein jeweiliges Format vorschreiben. Bei Mail-Adressen, Zahlen und Daten ist es nun möglich, bereits beim Ausfüllen eine browsereigene Validierung vornehmen, d. h. die Eingabe auf Gültigkeit zu überprüfen. Ungültige Eingaben werden gleich zurückgewiesen und nicht erst zum Server gesandt.

Eingabe von Mail-Adressen[Bearbeiten]

Im folgenden Formular werden zum Login E-Mail und Passwort abgefragt:

Beispiel: ein input-Feld für E-Mails ansehen …
<form> <label for="mail">E-Mail</label> <input id="mail" type="email"> <label for="passwd">Passwort</label> <input id="passwd" type="password"> <button type="submit">absenden</button> </form>

Das Eingabefeld erhält einen type="email". So überprüfen die Browser mittels eines regulären Ausdrucks, ob die Eingabe den Konventionen einer E-Mailadresse entspricht. Bei einer ungültigen Eingabe wird das Feld rot umrandet, wenn es den Fokus verlässt.


Empfehlung: Fragen Sie anstelle eines frei zu wählenden Benutzernamens lieber die E-Mailadresse ab!
Entweder verwenden die Benutzer aus Bequemlichkeit immer den gleichen Benutzernamen und womöglich sogar dasselbe Passwort oder sie vergessen es bis zum nächsten Einloggen und müssen die Login-Daten erst wieder anfordern. Die E-Mailadresse ist dagegen eindeutig und unverwechselbar.

Eingabe von Zahlen und Daten[Bearbeiten]

Zur Anmeldung auf einer Webseite benötigen wir noch das Alter und Geburtsdatum. (Aus Gründen der Benutzerfreundlichkeit wäre es besser,das Forumlar so einfach wie möglich zu halten; nur das Geburtsdatum zu erheben und das Alter auszurechnen.)

Beispiel: ein input-Feld für E-Mails ansehen …
<form> <label for="age">Alter</label> <input id="age" type="number"> <label for="birthday">Geburtsdatum</label> <input id="birthday" type="date"> <button type="reset">Felder leeren</button> <button type="submit">absenden</button> </form>

Bei input type="number" erscheinen im Eingabefeld rechts zwei Pfeile, mit denen Sie den Wert schrittweise erhöhen oder senken können - eine Eingabe per Tastatur ist natürlich ebenfalls möglich. Die Eingabe von Buchstaben und Sonderzeichen wird aber abgeweisen.

Bei input type="date" erscheint im Eingabefeld ein placeholder mit der Formatierung TT.MM.JJJJ, der dem Nutzer bei der Eingabe hilft. Bei einem Klick in das Feld erscheint bei moblien Geräten und modernen Browsern ein benutzerfreundliches Kalenderfeld, auf dem Sie das Datum nur anklicken müssen.

Diese neuen Typen gehen mittlerweile in allen Browsern; eine Datumseingabe jedoch nicht mit den IE 9-11. Hier wird ein normales Texteingabefeld gerendert.

Im Kapitel Gestaltung mit JavaScript stellen wir Ihnen noch einen Schieberegler zur stufenlosen Eingabe von numerischen Werten vor.

Attribute[Bearbeiten]

Wäre es nicht gut, beim Geburtsdatum „unmögliche“ Werte wie das gestrige oder ein 200 Jahre zurückliegendes Datum auszuschließen? Das ist mit zusätzlichen Attributen des input-Elements möglich!

Eingabemuster mit pattern[Bearbeiten]

Mit dem pattern-Attribut können Sie die Eingaben von input-Elemente gegen einen regulären Ausdruck hin überprüfen, ob die Eingabe den Erwartungen entspricht. Für die Eingabe von Zahlen, Telefonnummern und E-Mail-Adressen gibt es bereits eigene Typen, sodass Sie keine weiteren Einstellungen vornehmen müssen.

  • HTML5
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

In diesem Beispiel soll die Altersangabe mindestens 18, höchstens jedoch 99 sein. Höhere, bzw. niedrigere Eingaben sollen zurückgewiesen werden:

Beispiel: Eingabemuster mit pattern ansehen …
<form> <label for="age">Alter</label> <input id="age" type="number" pattern="(1[89]|[2-9][0-9]))"> <button type="reset">Felder leeren</button> <button type="submit">absenden</button> </form>

Die Eingabe wird vor dem Absenden des Formulars auf Korrektheit überprüft. Das pattern-Attribut enthält einen regulären Ausdruck: (1[89]|[2-5][0-9])) → Bei einer 1 als ersten Zahl dürfen 8 oder 9 folgen, bei einer 2-9 alle Zahlen von 0-9.

Damit sind auch komplexere Abfragen möglich; die dabei verwendeten RegEx sind jedoch nicht trivial:

Beispiel: pattern, dass Geburtstage vor 1900 ausschließt
<label for="age">Geburtsdatum</label> <input id="age" type="date" placeholder="YYYY-MM-DD" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" title="Enter a date in this format YYYY-MM-DD" >

Hier wird für das englische Datumsformat überprüft, ob die (im Englischen führende) Jahreszahl mit 19 oder 20 beginnt. Anschließend werden für die Monate nur 1-12 akzpetiert, dann für die Monate entweder 30 , für den Monat 02 nur 29 und für die Monate 13578 dann 31 Tage.

Empfehlung: Verzichten Sie auf die Überprüfung mit solchen festen RegEx. Sie können nie sicherstellen, in welchem lokalen Format die Dateneingabe erfolgt. Wandeln Sie Datumseingaben in ein UTC-Datum um und führen Sie Berechnungen mit diesem aus.

Ober- und Untergrenzen[Bearbeiten]

Im Allgemeinen ist der Einsatz solch regulärer Ausdrücke nicht nötig - HTML5 bietet dafür mit den Attributen min, max und maxlength, mit den Sie Ober- und Untergrenzen festlegen können, bequemere Alternativen:

Beispiel ansehen …
input {
    border: 1px solid black;
}
input:in-range {
    background-color: rgba(0, 255, 0, 0.25);
}
input:out-of-range {
    background-color: rgba(255, 0, 0, 0.25);
    border: 2px solid red;
}
input:in-range + ::after {
    content:' ✔';
}
input:out-of-range + ::after {
    content:' außerhalb des Bereichs!';
}
<form action="" id="form1">
  <label for="alter">Ihr Alter ist: </label>
  <input id="alter" name="altersangabe" type="number" placeholder="6 bis 99" min="6" max="99">
  <span></span>
</form>
Im vorliegenden Beispiel ändert sich die Hintergrundfarbe des Eingabefelds von grün auf rot, sobald etwas außerhalb des Gültigkeitsbereichs eingegeben wurde. Die Hintergrundfarbe ist in den Pseudoklassen :in-range und :out-of-range festgelegt. Sobald der eingegebene Wert wieder im Gültigkeitsbereich der Bereichsbegrenzung liegt, wird der Hintergrund wieder grün.

Pflichtfelder[Bearbeiten]

Pflichtfelder erhalten das required-Attribut (engl. für erforderlich). Solange die Eingaben nicht valide sind, wird ein Absenden des Formulars verhindert und eine Fehlermeldung ausgegeben.

  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Pflichtangaben ansehen …
<form> <label for="bname">Benutzername</label> <input id="bname" required> <label for="passwd">Passwort</label> <input type="password" id="passwd" required> <button type="submit">Anmelden</button> </form>
Beachten Sie: Safari zeigt zwar die entsprechende Fehlermeldung an, schickt das Formular aber trotzdem ab.


Screenshot von Fehlermeldungen bei Pflichtangaben

Beachten Sie: Diese Meldungen sind sehr allgemein gehalten und können unter ungünstigen Umständen in der im Browser eingestellten, und nicht in der in der Webseite verwendeten Sprache sein.
Es könnte empfehlenswert sein, die browsereigene Gültigkeitsüberprüfung abzuschalten und durch eigene JavaScripte zu ersetzen.

Anwendungsbeispiel[Bearbeiten]

Validierung der Eingabe[Bearbeiten]

Es ist sinnvoll, Pflichtfelder zu kennzeichnen. Häufig geschieht das durch einen Asterisk *. In diesem Beispiel ändert sich die Kennzeichnung zu einem Haken ✔, sobald die Eingabe valide ist. Durch Verwendung der Pseudoklassen :valid, :invalid können Sie die Eingabe überprüfen:

Beispiel ansehen …
form {
  width: 30em;
  padding-top: 3em;
  position: relative;
}
input {
  margin: 0 0 1em 31%;
  padding: .2em .5em;
  width: 60%;
  background-color: #fffbf0; 
  border: 1px solid #e7c157;  
}
label { 
  text-align: right;
  line-height: 1.5;
  width: 30%;
  position: absolute;
  left: 0;
}
label::after {
  content: ": ";
}
button {
  margin-left: 31%;
}
input:required + label::before {
  position: absolute;
  left: 300%;
  content: "★";
  color: red;
}
input:required:valid + label::before {
  content: "✔";
  color: green;
}
    <form>
         <input id="bname" required><label for="bname">Benutzername</label>
         <input id="passwd" type="password" required><label for="passwd">Passwort</label>      
         <button type="submit">anmelden</button>
    </form>
Die Kennzeichnung ( bzw. ) erfolgt durch ::before-Pseudoelemente der label-Elemente, die ::after-Pseudoelemente stellen wie in den anderen Beispielen dieser Seite auch bereits die abschließenden Doppelpunkte dar.

Die Reihenfolge im Markup ist ungewöhnlich, aber notwendig:

  • input darf als replaced element keinen, auch keinen generierten Inhalt erhalten,
  • CSS kann nur vorwärts selektieren