html mit Adi Prinz

Formulareingaben automatisch prüfen

Die integrierte HTML-Validierung wird normalerweise ausgelöst, wenn ein Formular über eine Schaltfläche mit type="submit" abgesendet wird.

<form action="anmeldung.php" method="post">
  <label for="email">
    E-Mail-Adresse:
  </label>

  <input
    type="email"
    id="email"
    name="email"
    required>

  <button type="submit">
    Anmeldung absenden
  </button>
</form>
    

Bleibt das Feld leer oder besitzt die Eingabe kein gültiges E-Mail-Format, verhindert der Browser das Absenden und zeigt einen entsprechenden Hinweis an.

Eine Eingabe verpflichtend machen

Das boolesche Attribut required kennzeichnet ein Formularfeld als Pflichtfeld. Das Formular kann erst abgesendet werden, wenn eine gültige Eingabe oder Auswahl vorhanden ist.

<label for="nachname">
  Nachname:
</label>

<input
  type="text"
  id="nachname"
  name="nachname"
  required>
    

Die Kennzeichnung als Pflichtfeld sollte nicht nur durch eine Farbe erfolgen. Ein sichtbarer Hinweis wie „Pflichtfeld“ oder ein erklärtes Sternchen erleichtert die Bedienung.

Passende Eingabetypen verwenden

Bestimmte Werte werden bereits durch den verwendeten input-Typ geprüft. Der Browser kontrolliert dabei, ob die Eingabe grundsätzlich zum erwarteten Format passt.

• type="email" erwartet eine syntaktisch passende E-Mail-Adresse.
• type="url" erwartet eine syntaktisch passende URL.
• type="number" erwartet eine Zahl.
• type="date" ermöglicht die Eingabe eines Datums.
• type="time" ermöglicht die Eingabe einer Uhrzeit.

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

<input
  type="url"
  name="webseite">

<input
  type="number"
  name="anzahl"
  min="1"
  max="10">
    

Ein spezieller Eingabetyp verbessert häufig auch die Bedienung auf Smartphones, weil eine zum Feld passende Bildschirmtastatur oder Eingabeoberfläche angezeigt werden kann.

Die Textlänge festlegen

Mit minlength wird die erforderliche Mindestlänge und mit maxlength die erlaubte Höchstlänge einer Texteingabe festgelegt.

<label for="benutzername">
  Benutzername:
</label>

<input
  type="text"
  id="benutzername"
  name="benutzername"
  minlength="4"
  maxlength="20"
  required>
    

minlength und maxlength beziehen sich auf die Anzahl der eingegebenen Zeichen. Für Zahlenbereiche werden stattdessen min und max verwendet.

Einen zulässigen Wertebereich festlegen

Die Attribute min und max begrenzen den zulässigen Wert bei geeigneten Eingabetypen wie number, range, date oder time.

<label for="teilnehmerzahl">
  Anzahl der Teilnehmer:
</label>

<input
  type="number"
  id="teilnehmerzahl"
  name="teilnehmerzahl"
  min="1"
  max="12"
  required>
    

Zulässige Zahlenschritte festlegen

Das Attribut step bestimmt, in welchen Schritten ein Zahlen-, Datums- oder Zeitwert verändert werden darf.

<label for="menge">
  Bestellmenge:
</label>

<input
  type="number"
  id="menge"
  name="menge"
  min="0"
  max="10"
  step="0.5">
    

Im HTML-Quellcode werden Dezimalzahlen unabhängig von der Sprache mit einem Punkt geschrieben, beispielsweise step="0.5". Die Darstellung für Benutzer kann vom Browser und von den Spracheinstellungen abhängen.

Ein Eingabemuster festlegen

Mit dem Attribut pattern kann für bestimmte Textfelder ein regulärer Ausdruck als zusätzliches Eingabemuster festgelegt werden.

<label for="postleitzahl">
  Österreichische Postleitzahl:
</label>

<input
  type="text"
  id="postleitzahl"
  name="postleitzahl"
  inputmode="numeric"
  pattern="[0-9]{4}"
  title="Geben Sie eine vierstellige Postleitzahl ein."
  required>
    

Das Eingabemuster sollte zusätzlich in verständlicher Sprache erklärt werden. Benutzer sollten nicht erst durch eine Fehlermeldung erfahren, welches Format erwartet wird.

Einen zusätzlichen Hinweis angeben

Das title-Attribut kann eine kurze Erklärung zum erwarteten Eingabeformat enthalten. Es sollte jedoch nicht die einzige sichtbare Anleitung für das Feld sein.

<input
  type="text"
  name="kursnummer"
  pattern="[A-Z]{2}-[0-9]{3}"
  title="Beispiel: HT-101"
  required>
    

Eine passende sichtbare Beschreibung könnte folgendermaßen ergänzt werden:

<p id="kursnummer-hinweis">
  Format: zwei Großbuchstaben, Bindestrich und drei Ziffern,
  zum Beispiel HT-101.
</p>

<input
  type="text"
  name="kursnummer"
  pattern="[A-Z]{2}-[0-9]{3}"
  aria-describedby="kursnummer-hinweis"
  required>
    

Die Browservalidierung deaktivieren

Mit dem booleschen Attribut novalidate am form-Element wird die integrierte Validierung beim Absenden des Formulars deaktiviert.

<form
  action="kontakt.php"
  method="post"
  novalidate>

  <!-- Formularfelder -->
</form>
    

Für eine einzelne Submit-Schaltfläche steht das Attribut formnovalidate zur Verfügung:

<button type="submit">
  Formular absenden
</button>

<button
  type="submit"
  formnovalidate>
  Entwurf speichern
</button>
    

novalidate ist beispielsweise sinnvoll, wenn die vollständige Validierung mit JavaScript umgesetzt wird. Eine Prüfung auf dem Server bleibt trotzdem notwendig.

Eingaben zusätzlich auf dem Server prüfen

Die HTML-Validierung findet im Browser des Benutzers statt. Sie verbessert die Bedienung und kann viele fehlerhafte Eingaben frühzeitig erkennen. Sie ist jedoch keine Sicherheitsmaßnahme.

• HTML-Attribute können verändert oder entfernt werden.
• Anfragen können ohne das sichtbare Formular gesendet werden.
• Die Browservalidierung kann bewusst umgangen werden.
• Manipulierte oder schädliche Werte müssen abgefangen werden.

Alle empfangenen Daten müssen deshalb auf dem Server erneut geprüft werden. Vor einer Ausgabe oder Speicherung müssen sie außerdem passend zum jeweiligen Verwendungszweck sicher verarbeitet werden.

Praxisbeispiel: Veranstaltungsanmeldung

Das Lernbeispiel kombiniert Pflichtfelder, passende Eingabetypen, Längenbegrenzungen, ein Eingabemuster und einen Zahlenbereich. Durch onsubmit="return false;" wird die tatsächliche Übertragung verhindert.

Gültige und ungültige Eingaben unterscheiden

Die Pseudoklasse :valid wählt Formularfelder aus, deren aktueller Wert die festgelegten Anforderungen erfüllt. :invalid gilt für Felder mit einem ungültigen Wert.

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}
    

Ein leeres Pflichtfeld ist bereits ungültig. Deshalb kann eine rote Markierung erscheinen, bevor der Benutzer überhaupt mit der Eingabe begonnen hat. Dieses Verhalten sollte bei der Gestaltung berücksichtigt werden.

Gültige Felder mit :valid auswählen

Ein Feld entspricht :valid, wenn sein Wert alle für dieses Feld geltenden Anforderungen erfüllt.

input:valid {
  border: 2px solid #198754;
  background-color: #f0fff4;
}
    

Bei einem E-Mail-Feld mit required müssen beispielsweise zwei Bedingungen erfüllt sein:

• Das Feld darf nicht leer sein.
• Die Eingabe muss ein gültiges E-Mail-Format besitzen.

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

Ein Feld ohne Validierungsanforderungen kann auch dann :valid entsprechen, wenn es leer ist.

Ungültige Felder mit :invalid auswählen

Die Pseudoklasse :invalid gilt, sobald mindestens eine Validierungsanforderung nicht erfüllt ist.

input:invalid {
  border: 2px solid #dc3545;
  background-color: #fff5f5;
}
    

Ein Formularfeld kann beispielsweise ungültig sein, weil:

• ein Pflichtfeld leer ist,
• eine E-Mail-Adresse nicht dem erwarteten Format entspricht,
• ein Zahlenwert außerhalb von min und max liegt,
• die erforderliche Mindestlänge nicht erreicht wird oder
• die Eingabe nicht dem festgelegten pattern entspricht.

Die CSS-Pseudoklasse zeigt nur an, dass ein Feld ungültig ist. Den konkreten Grund bestimmt die HTML-Validierung des Browsers.

Pflichtfelder und optionale Felder gestalten

Mit :required werden Felder ausgewählt, die das Attribut required besitzen. :optional gilt für unterstützte Formularfelder ohne dieses Attribut.

input:required,
textarea:required,
select:required {
  border-left: 5px solid #dc3545;
}

input:optional,
textarea:optional,
select:optional {
  border-left: 5px solid #6c757d;
}
    

Die Kennzeichnung sollte zusätzlich im Text erklärt werden. Eine farbige Linie allein ist für Benutzer mit eingeschränktem Farbsehen möglicherweise nicht ausreichend.

Ein noch leeres Feld erkennen

Die Pseudoklasse :placeholder-shown gilt, solange in einem Feld der Platzhalter angezeigt wird. Damit kann ein noch nicht ausgefülltes Feld von einem Feld mit Eingabe unterschieden werden.

input:placeholder-shown {
  background-color: #f8f9fa;
}

input:not(:placeholder-shown) {
  background-color: #ffffff;
}
    

<input
  type="email"
  name="email"
  placeholder="name@beispiel.at"
  required>
    

Ein placeholder ersetzt kein label. Der Platzhalter verschwindet bei der Eingabe und sollte daher nur eine zusätzliche Hilfestellung enthalten.

Ungültige leere Felder nicht sofort rot markieren

Durch die Kombination von :invalid und :not(:placeholder-shown) kann die Fehlermarkierung bei Textfeldern auf Felder beschränkt werden, in die bereits etwas eingegeben wurde.

input:invalid:not(:placeholder-shown) {
  border-color: #dc3545;
}

input:valid:not(:placeholder-shown) {
  border-color: #198754;
}
    

Diese Technik eignet sich vor allem für Textfelder mit Platzhalter. Sie erkennt jedoch nicht zuverlässig, ob ein Feld bereits besucht und danach wieder geleert wurde. Für eine vollständige Steuerung wird häufig JavaScript verwendet.

Fokus und Gültigkeitszustand kombinieren

Während der Eingabe kann eine starke Fehlermarkierung störend wirken. Mit :not(:focus) wird sie erst angezeigt, wenn das Feld den Fokus nicht mehr besitzt.

input:invalid:not(:focus):not(:placeholder-shown) {
  border-color: #dc3545;
  background-color: #fff5f5;
}

input:valid:not(:focus):not(:placeholder-shown) {
  border-color: #198754;
  background-color: #f0fff4;
}
    

Der sichtbare Fokus darf dabei nicht entfernt werden. Benutzer, die mit der Tastatur navigieren, müssen jederzeit erkennen können, welches Element gerade aktiv ist.

Werte innerhalb und außerhalb eines Bereichs gestalten

Für Eingabefelder mit einem festgelegten Mindest- oder Höchstwert stehen die Pseudoklassen :in-range und :out-of-range zur Verfügung.

input:in-range {
  border-color: #198754;
}

input:out-of-range {
  border-color: #dc3545;
}
    

:out-of-range bedeutet, dass der Wert außerhalb des mit min und max festgelegten Bereichs liegt. Andere Validierungsfehler werden weiterhin mit :invalid erfasst.

Bearbeitbare und schreibgeschützte Felder unterscheiden

Mit :read-only können nicht bearbeitbare Felder und mit :read-write bearbeitbare Felder ausgewählt werden.

input:read-only {
  background-color: #e9ecef;
  color: #495057;
}

input:read-write {
  background-color: #ffffff;
}
    

Ein Feld mit readonly kann nicht verändert werden, wird aber beim Absenden des Formulars normalerweise übertragen. Ein Feld mit disabled wird normalerweise nicht übertragen.

Aktivierte und deaktivierte Felder gestalten

Die Pseudoklassen :enabled und :disabled unterscheiden bedienbare und deaktivierte Formularelemente.

input:enabled {
  cursor: text;
}

input:disabled {
  background-color: #e9ecef;
  color: #6c757d;
  cursor: not-allowed;
}
    

Ausgewählte Optionsfelder und Checkboxen gestalten

Die Pseudoklasse :checked gilt für ausgewählte Optionsfelder und aktivierte Checkboxen.

input[type="radio"]:checked,
input[type="checkbox"]:checked {
  accent-color: #0d6efd;
}
    

Mit der benachbarten Geschwisterkombination kann auch das nachfolgende label gestaltet werden:

input:checked + label {
  color: #0d6efd;
  font-weight: bold;
}
    

Den Zustand eines vollständigen Formulars gestalten

Auch ein form-Element kann :valid oder :invalid entsprechen. Der Zustand hängt von den enthaltenen Formularfeldern ab.

form:invalid button[type="submit"] {
  opacity: 0.7;
}

form:valid button[type="submit"] {
  opacity: 1;
}
    

Eine Submit-Schaltfläche sollte nicht allein mit CSS deaktiviert oder unbedienbar gemacht werden. Benutzer müssen das Formular absenden können, damit der Browser die ungültigen Felder anzeigen und erklären kann.

Praxisbeispiel: Zustände verständlich hervorheben

Das Beispiel verbindet sichtbare Hinweise mit einer zusätzlichen farblichen Gestaltung. Die eigentliche Prüfung übernimmt weiterhin die integrierte HTML-Validierung.

Die Constraint Validation API

Die Constraint Validation API arbeitet mit den Validierungsregeln, die durch HTML-Attribute wie required, min, max, minlength oder pattern festgelegt wurden.

Zu den wichtigsten Bestandteilen gehören:

• checkValidity() – prüft die Gültigkeit eines Feldes oder Formulars.
• reportValidity() – prüft die Gültigkeit und zeigt Browsermeldungen an.
• setCustomValidity() – legt eine eigene Fehlermeldung fest.
• validity – enthält einzelne Informationen über den Gültigkeitszustand.
• validationMessage – enthält die aktuelle Validierungsmeldung.
• willValidate – gibt an, ob ein Element überhaupt geprüft wird.

JavaScript ergänzt die HTML-Validierung. Die grundlegenden Regeln sollten möglichst weiterhin direkt mit den passenden HTML-Attributen beschrieben werden.

Die Gültigkeit mit checkValidity() prüfen

Die Methode checkValidity() prüft, ob ein Formularfeld oder ein vollständiges Formular gültig ist. Sie liefert true oder false zurück.

const email = document.querySelector("#email");

if (email.checkValidity()) {
  console.log("Die Eingabe ist gültig.");
} else {
  console.log("Die Eingabe ist ungültig.");
}
    

Die Methode kann auch auf ein vollständiges Formular angewendet werden:

const formular = document.querySelector("#kontaktformular");

if (formular.checkValidity()) {
  console.log("Das Formular ist gültig.");
} else {
  console.log("Das Formular enthält Fehler.");
}
    

checkValidity() zeigt normalerweise keine sichtbare Browsermeldung an. Die Methode liefert in erster Linie den aktuellen Gültigkeitszustand.

Fehlermeldungen mit reportValidity() anzeigen

Die Methode reportValidity() prüft ebenfalls die Gültigkeit. Bei einem Fehler zeigt der Browser zusätzlich seine integrierte Validierungsmeldung an.

const formular = document.querySelector("#anmeldeformular");

formular.reportValidity();
    

Im Unterschied zu checkValidity() fordert reportValidity() den Browser ausdrücklich dazu auf, vorhandene Validierungsfehler sichtbar anzuzeigen.

Einzelne Fehler über validity erkennen

Die Eigenschaft validity enthält ein ValidityState-Objekt. Dieses Objekt beschreibt, welche Validierungsregel nicht erfüllt ist.

• valueMissing – ein Pflichtfeld ist leer.
• typeMismatch – der Wert passt nicht zum Eingabetyp.
• patternMismatch – der Wert entspricht nicht dem Muster.
• tooShort – die erforderliche Mindestlänge wurde nicht erreicht.
• tooLong – die erlaubte Höchstlänge wurde überschritten.
• rangeUnderflow – der Wert liegt unterhalb von min.
• rangeOverflow – der Wert liegt oberhalb von max.
• stepMismatch – der Wert entspricht nicht den erlaubten Schritten.
• badInput – der Browser konnte die Eingabe nicht in den erwarteten Wert umwandeln.
• customError – eine eigene Fehlermeldung wurde festgelegt.
• valid – alle Anforderungen sind erfüllt.

const alter = document.querySelector("#alter");

if (alter.validity.valueMissing) {
  console.log("Bitte geben Sie Ihr Alter ein.");
} else if (alter.validity.rangeUnderflow) {
  console.log("Das Mindestalter beträgt 18 Jahre.");
} else if (alter.validity.rangeOverflow) {
  console.log("Der eingegebene Wert ist zu hoch.");
}
    

Die aktuelle Meldung mit validationMessage auslesen

Die Eigenschaft validationMessage enthält die Meldung, die der Browser für den aktuellen Validierungsfehler vorgesehen hat.

const feld = document.querySelector("#benutzername");

if (!feld.checkValidity()) {
  console.log(feld.validationMessage);
}
    

Die genaue Formulierung hängt vom Browser und von dessen Spracheinstellungen ab. Deshalb sollte der Programmcode nicht auf einen bestimmten Wortlaut der Browsermeldung angewiesen sein.

Prüfen, ob ein Feld validiert wird

Die Eigenschaft willValidate liefert true, wenn ein Formularfeld an der integrierten Validierung teilnimmt.

const feld = document.querySelector("#kundennummer");

console.log(feld.willValidate);
    

Bestimmte Elemente werden von der Validierung ausgeschlossen. Dazu gehören beispielsweise deaktivierte Felder und Eingaben mit type="hidden".

<input
  type="text"
  name="vorname"
  required>

<input
  type="text"
  name="kundennummer"
  disabled>

<input
  type="hidden"
  name="formular-id"
  value="17">
    

Ein Feld mit readonly nimmt ebenfalls nicht an der Constraint Validation teil. Sein Wert wird beim Absenden jedoch im Unterschied zu einem deaktivierten Feld normalerweise übertragen.

Eine eigene Fehlermeldung festlegen

Mit setCustomValidity() kann einem Formularfeld eine eigene Fehlermeldung zugewiesen werden.

const benutzername = document.querySelector("#benutzername");

benutzername.setCustomValidity(
  "Dieser Benutzername ist bereits vergeben."
);
    

Solange eine nicht leere Meldung gesetzt ist, gilt das Feld als ungültig. Sobald der Fehler nicht mehr besteht, muss die Meldung wieder gelöscht werden:

benutzername.setCustomValidity("");
    

Das Zurücksetzen mit einer leeren Zeichenfolge ist besonders wichtig. Andernfalls bleibt das Feld ungültig, obwohl der Benutzer seine Eingabe bereits korrigiert hat.

Zusammengehörige Eingaben vergleichen

Manche Regeln lassen sich nicht mit einem einzelnen HTML-Attribut beschreiben. Ein typisches Beispiel ist der Vergleich zweier Passwortfelder.

Die Prüfung wird bei jeder Änderung eines der beiden Felder erneut durchgeführt. Dadurch verschwindet die Fehlermeldung sofort, sobald beide Eingaben übereinstimmen.

Auf das invalid-Ereignis reagieren

Das Ereignis invalid wird ausgelöst, wenn ein ungültiges Feld während einer Gültigkeitsprüfung erkannt wird.

const email = document.querySelector("#kontakt-email");

email.addEventListener("invalid", function () {
  console.log("Das E-Mail-Feld ist ungültig.");
});
    

Das Ereignis kann beispielsweise verwendet werden, um eine zusätzliche CSS-Klasse zu setzen:

email.addEventListener("invalid", function () {
  email.classList.add("has-error");
});
    

Das invalid-Ereignis steigt nicht wie viele andere Ereignisse zu übergeordneten Elementen auf. Soll es zentral am Formular erfasst werden, kann die Capture-Phase verwendet werden.

formular.addEventListener(
  "invalid",
  function (event) {
    event.target.classList.add("has-error");
  },
  true
);
    

Das Absenden eines gültigen Formulars behandeln

Das submit-Ereignis wird bei aktivierter Browservalidierung nur ausgelöst, wenn die HTML-Anforderungen erfüllt sind.

const formular = document.querySelector("#kontaktformular");

formular.addEventListener("submit", function (event) {
  event.preventDefault();

  console.log("Das Formular ist gültig.");
});
    

event.preventDefault() verhindert in einem Lernbeispiel die tatsächliche Übertragung. In einem produktiven Formular darf das Absenden nur verhindert werden, wenn die Daten stattdessen gezielt mit JavaScript verarbeitet oder übertragen werden.

Ein Formular mit requestSubmit() absenden

Mit requestSubmit() kann das Absenden eines Formulars durch JavaScript so ausgelöst werden, als hätte der Benutzer eine Submit-Schaltfläche betätigt.

const formular = document.querySelector("#bestellformular");

formular.requestSubmit();
    

Dabei werden die integrierte Validierung und das submit-Ereignis berücksichtigt.

Die ältere Methode submit() verhält sich anders:

• requestSubmit() führt die Formularvalidierung aus.
• requestSubmit() löst das submit-Ereignis aus.
• submit() umgeht diese Schritte.

Für ein normales, programmgesteuertes Absenden ist requestSubmit() daher in der Regel die passende Methode.

Praxisbeispiel: Kursanmeldung prüfen

Das Attribut novalidate verhindert hier nur die eingeblendeten Standardmeldungen des Browsers. Die Gültigkeitsregeln bleiben bestehen und können weiterhin mit checkValidity() abgefragt werden. Die Bootstrap-Klasse was-validated macht die Zustände sichtbar.

JavaScript ersetzt keine serverseitige Prüfung

Auch eine umfangreiche JavaScript-Validierung wird im Browser ausgeführt und kann verändert oder vollständig umgangen werden.

• JavaScript kann deaktiviert oder manipuliert werden.
• HTML-Attribute können im Browser verändert werden.
• Anfragen können direkt an den Server gesendet werden.
• Übertragene Werte können unerwartete Inhalte enthalten.

Der Server muss daher alle empfangenen Werte unabhängig von der Prüfung im Browser erneut validieren. Die clientseitige Validierung verbessert die Bedienung, während die serverseitige Validierung für die zuverlässige Verarbeitung der Daten verantwortlich ist.