Das umfassende Handbuch zu HTML-Formularen und Einschränkungsvalidierung

In diesem Artikel untersuchen wir HTML-Formularfelder und die Validierungsoptionen, die HTML5 bietet. Wir werden auch betrachten, wie diese durch die Verwendung von CSS und JavaScript verbessert werden können.

Was ist Einschränkungsvalidierung?

Jedes Formularfeld hat eine bestimmte Funktion. Und diese Funktion wird oft durch Einschränkungen — oder die Regeln bestimmt, die festlegen, was in jedem Formularfeld eingegeben werden soll und was nicht. Zum Beispiel wird ein email-Feld eine gültige E-Mail-Adresse erfordern; ein password-Feld könnte bestimmte Zeichentypen erfordern und eine Mindestanzahl an erforderlichen Zeichen haben; und ein Textfeld könnte eine Begrenzung für die Anzahl der eingegebenen Zeichen aufweisen.

Moderne Browser haben die Fähigkeit, zu überprüfen, ob diese Einschränkungen von Benutzern eingehalten werden, und können sie warnen, wenn diese Regeln verletzt wurden. Dies wird als Einschränkungsvalidierung bezeichnet.

Client-seitige vs. Server-seitige Validierung

Der Großteil des in den frühen Jahren der Sprache geschriebenen JavaScript-Codes behandelte die clientseitige Formularvalidierung. Auch heute noch verbringen Entwickler viel Zeit damit, Funktionen zum Überprüfen von Feldwerten zu schreiben. Ist dies in modernen Browsern immer noch notwendig? Wahrscheinlich nicht. In den meisten Fällen hängt es wirklich davon ab, was Sie tun möchten.

Aber zunächst hier eine große Warnung:

Client-seitige Validierung ist eine Annehmlichkeit, die vor dem Versand von Daten an einen Server häufige Dateneingabefehler verhindern kann. Es ist jedoch kein Ersatz für die serverseitige Validierung!

Sanitiere immer Daten serverseitig. Nicht jeder Anfrage wird von einem Browser ausgehen. Selbst wenn dies der Fall ist, gibt es keine Garantie, dass der Browser die Daten validiert hat. Jeder, der weiß, wie man die Entwicklertools eines Browsers öffnet, kann auch dein mühsam erstelltes HTML und JavaScript umgehen.

HTML5-Eingabefelder

HTML bietet:

• <textarea> für mehrzeilige Textfelder
• <select> für eine Dropdown-Liste von Optionen
• <button> für … Schaltflächen

Aber du wirst am häufigsten <input> verwenden:

<input type="text" name="username" />

Der type-Attribut bestimmt die Steuerelementart, und es gibt eine große Auswahl an Optionen:

type	description
button	a button with no default behavior
checkbox	a check/tick box
color	a color picker
date	a date picker for the year, month, and day
datetime-local	a date and time picker
email	an email entry field
file	a file picker
hidden	a hidden field
image	a button which displays the image defined by the src attribute
month	a month and year picker
number	a number entry field
password	a password entry field with obscured text
radio	a radio button
range	a slider control
reset	a button that resets all form inputs to their default values (but avoid using this, as it’s rarely useful)
search	a search entry field
submit	a form submission button
tel	a telephone number entry field
text	a text entry field
time	a time picker with no time zone
url	a URL entry field
week	a week number and year picker

Der Browser fällt zurück auf text, wenn du das type-Attribut weglässt oder er eine Option nicht unterstützt. Moderne Browser haben eine gute Unterstützung für alle Typen, aber alte Browser zeigen immer noch ein Texteingabefeld an.

Andere nützliche <input>-Attribute beinhalten:

attribute	description
accept	file upload type
alt	alternative text for the image types
autocomplete	hint for field auto-completion
autofocus	focus field on page load
capture	media capture input method
checked	checkbox/radio is checked
disabled	disable the control (it won’t be validated or have its value submitted)
form	associate with a form using this ID
formaction	URL for submission on submit and image buttons
inputmode	data type hint
list	ID of <datalist> autocomplete options
max	maximum value
maxlength	maximum string length
min	minimum value
minlength	minimum string length
name	name of control, as submitted to server
pattern	a regular expression pattern, such as [A-Z]+ for one or more uppercase characters
placeholder	placeholder text when the field value is empty
readonly	the field is not editable, but it will still be validated and submitted
required	the field is required
size	the size of the control (often overridden in CSS)
spellcheck	set true or false spell-checking
src	image URL
step	incremental values in numbers and ranges
type	field type (see above)
value	the initial value

HTML-Ausgabefelder

Zusätzlich zu Eingabetypen bietet HTML5 schreibgeschützte Ausgaben:

• output: ein Textresultat einer Berechnung oder eines Benutzerakts
• progress: eine Fortschrittsleiste mit value und max Attributen
• meter: eine Skala, die je nach den für die Attribute value, min, max, low, high und optimum gesetzten Werten zwischen grün, amber und rot wechseln kann.

Eingabebeschriftungen

Felder sollten eine zugehörige <label> haben, die man um das Element herum wickeln kann:

<label>your name <input type="text" name="name" /><label>

Oder man verknüpft das Feld’s id mit der Beschriftung unter Verwendung eines for Attributs:

<label for="nameid">your name</label>
<input type="text" id="nameid" name="name" />

Beschriftungen sind wichtig für Barrierefreiheit. Man kann Formulare finden, die einen placeholder verwenden, um Bildschirmplatz zu sparen:

<input type="text" name="name" value="" placeholder="your name" />

Der Platzhaltertext verschwindet, sobald der Benutzer etwas eingibt – sogar ein einzelnes Leerzeichen. Es ist besser, eine Beschriftung anzuzeigen, als den Benutzer zu zwingen, sich an das gewünschte Feld zu erinnern!

Eingabeverhalten

Feldtypen und Einschränkungsattribute verändern das Eingabeverhalten des Browsers. Zum Beispiel zeigt ein number Eingabefeld auf Mobilgeräten eine numerische Tastatur. Das Feld kann einen Pfeilspieler anzeigen, und Tastendrucks mit nach oben/unten zeigenden Pfeilen erhöhen und verringern die Werte.

Die meisten Feldtypen sind offensichtlich, aber es gibt Ausnahmen. Zum Beispiel sind Kreditkarten-Nummern numerisch, aber der Inkrement/Dekrement-Spinner ist nutzlos und es ist zu leicht, nach oben oder unten zu drücken, wenn eine 16-stellige Zahl eingegeben wird. Es ist besser, einen Standard-text-Typ zu verwenden, aber das inputmode-Attribut auf numeric zu setzen, was eine geeignete Tastatur anzeigt. Das Setzen von autocomplete="cc-number" schlägt auch vor, ob bereits konfigurierte oder zuvor eingegebene Kreditkartennummern verwendet werden.

Die Verwendung des richtigen Feld-typs und autocorrect bietet Vorteile, die mit JavaScript schwer zu erreichen wären. Zum Beispiel können einige mobile Browser:

• Kreditkarteninformationen durch Scannen einer Karte mit der Kamera importieren
• importieren Einmalkennungen, die per SMS gesendet wurden

Automatisches Validieren

Der Browser stellt sicher, dass ein Eingabewert den von den type, min, max, step, minlength, maxlength, pattern und required Attributen definierten Einschränkungen entspricht. Zum Beispiel:

<input type="number" min="1" max="100" required />

Der Versuch, einen leeren Wert einzugeben, verhindert die Formularübermittlung und zeigt in Chrome die folgende Meldung an:

Die Drehregler erlauben keine Werte außerhalb des Bereichs von 1 bis 100. Ähnliche Validierungsmitteilungen erscheinen, wenn Sie eine Zeichenfolge eingeben, die keine Zahl ist. All dies ohne eine einzige Zeile JavaScript.

Sie können die Browservalidierung stoppen, indem Sie:

• einen novalidate Attribut zum <form> Element hinzufügen
• einen formnovalidate Attribut zum Absendebutton oder Bild hinzufügen

Benutzerdefinierte JavaScript-Eingaben erstellen

Wenn Sie eine neue JavaScript-basierte Dateneingabekomponente schreiben, bitte halten Sie inne und gehen von Ihrer Tastatur weg!

Das Schreiben benutzerdefinierter Eingabesteuerungen ist schwierig. Sie müssen die Maus, Tastatur, Berührung, Sprache, Barrierefreiheit, Bildschirmauflösung und den Fall berücksichtigen, wenn JavaScript versagt. Sie erzeugen auch eine andere Benutzererfahrung. Vielleicht ist Ihre Steuerung besser als der Standard-Datumsauswahl auf Desktop, iOS und Android, aber die ungewohnte Benutzeroberfläche wird einige Benutzer verwirren.

Es gibt drei Hauptgründe, warum Entwickler zur Erstellung von JavaScript-basierten Eingaben greifen.

1. Standardsteuerungen sind schwer zu gestalten

CSS-Styling ist begrenzt und erfordert oft Hacks, wie das Überlagern eines Eingabefelds mit den Pseudo-Elementen ::before und ::after des Labels. Die Situation bessert sich, aber hinterfragen Sie jedes Design, das Form über Funktion stellt.

2. Moderne <input> Typen werden in alten Browsern nicht unterstützt

Im Wesentlichen programmieren Sie für Internet Explorer. IE-Benutzer erhalten keinen Datumsauswähler, können jedoch weiterhin Daten im Format YYYY-MM-DD eingeben. Wenn Ihr Kunde darauf besteht, laden Sie in IE nur eine Polyfill. Es besteht keine Notwendigkeit, moderne Browser zu belasten.

3. Sie benötigen einen neuen Eingabetyp, der noch nie implementiert wurde

Diese Situationen sind selten, aber beginnen immer mit geeigneten HTML5-Feldern. Sie sind schnell und funktionieren sogar bevor das Skript geladen wurde. Sie können Felder gezielt erweitern. Zum Beispiel kann eine Prise JavaScript dafür sorgen, dass das Enddatum eines Kalender-Events nach dem Startdatum auftritt.

Zusammenfassend: HTML-Steuerelemente neu erfinden vermeiden!

CSS-Validierungs-Styling

Sie können die folgenden Pseudo-Klassen auf Eingabefelder anwenden, um sie entsprechend dem aktuellen Zustand zu gestalten:

selector	description
:focus	the field with focus
:focus-within	an element contains a field with focus (yes, it’s a parent selector!)
:focus-visible	an element has focus owing to keyboard navigation, so a focus ring or more evident styling is necessary
:required	a field with a required attribute
:optional	a field without a required attribute
:valid	a field that has passed validation
:invalid	a field that has not passed validation
:user-valid	a field that has passed validation after the user has interacted with it (Firefox only)
:user-invalid	a field that hasn’t passed validation after the user has interacted with it (Firefox only)
:in-range	the value is within range on a number or range input
:out-of-range	the value is out of range on a number or range input
:disabled	a field with a disabled attribute
:enabled	a field without a disabled attribute
:read-only	a field with a read-only attribute
:read-write:	a field without a read-only attribute
:checked	a checked checkbox or radio button
:indeterminate	an indeterminate checkbox or radio state, such as when all radio buttons are unchecked
:default	the default submit button or image

Sie können den placeholder-Text eines Eingabefelds mit dem ::placeholder Pseudo-Element gestalten:

/* blauer Platzhalter auf E-Mail-Feldern */
input[type="email"]::placeholder {
  color: blue;
}

Die obigen Selektoren haben die gleiche Spezifität, sodass die Reihenfolge wichtig sein kann. Betrachten Sie folgendes Beispiel:

input:invalid { color: red; }
input:enabled { color: black; }

Ungültige Eingaben haben roten Text, aber es wird nur auf Eingaben mit einem disabled-Attribut angewendet — also sind alle aktivierten Eingaben schwarz.

Der Browser wendet Validierungsstile bei der Seitenladezeit an. Zum Beispiel erhält jedes ungültige Feld im folgenden Code einen roten Rahmen:

:invalid {
  border-color: #900;
}

Der Benutzer wird vor einer beeindruckenden Anzahl roter Kästchen konfrontiert, bevor er mit dem Formular interagiert. Die Anzeige von Validierungsfehlern nach der ersten Abgabe oder bei Änderung eines Werts würde eine bessere Erfahrung bieten. Hier kommt JavaScript ins Spiel…

JavaScript und die Constraint Validation API

Die Constraint Validation API bietet Formularanpassungsoptionen, die die standardmäßige HTML-Feldbereinigung verbessern können. Sie könnten:

• die Validierung bis zum Benutzerkontakt mit einem Feld oder der Abgabe des Formulars unterbinden
• Fehlermeldungen mit benutzerdefinierter Stilung anzeigen
• benutzerdefinierte Validierung bereitstellen, die allein mit HTML nicht möglich ist. Dies ist oft erforderlich, wenn Sie zwei Eingaben vergleichen müssen – beispielsweise bei der Eingabe einer E-Mail-Adresse oder eines Telefonnummern, wenn Sie überprüfen, ob „neue“ und „bestatigte“ Passwörter denselben Wert haben, oder um sicherzustellen, dass ein Datum auf ein anderes folgt.

Formularvalidierung

Bevor Sie die API verwenden, sollte Ihr Code die standardmäßige Validierung und Fehlermeldungen deaktivieren, indem er die noValidate-Eigenschaft des Formulars auf true setzt (das Gleiche wie ein novalidate-Attribut hinzufügen):

const myform = document.getElementById('myform');
myform.noValidate = true;

Sie können dann Ereignishandler hinzufügen – beispielsweise bei der Formularabgabe:

myform.addEventListener('submit', validateForm);

Der Handler kann die Gültigkeit des gesamten Formulars mithilfe der checkValidity()– oder reportValidity()-Methoden überprüfen, die true zurückgeben, wenn alle Eingaben des Formulars gültig sind. (Der Unterschied besteht darin, dass checkValidity() überprüft, ob Eingaben einer Einschränkungsvalidierung unterliegen.)

Die Mozilla-Dokumentation erklärt:

Ein invalid-Ereignis wird auch für jedes ungültige Feld ausgelöst. Dieses Ereignis erzeugt keine Blasen: Handler müssen auf jede Steuerung angewendet werden, die es verwendet.

// Formular bei Einreichung validieren
function validateForm(e) {

  const form = e.target;

  if (form.checkValidity()) {

    // Formular ist gültig - weitere Prüfungen durchführen

  }
  else {

    // Formular ist ungültig - Einreichung abbrechen
    e.preventDefault();

  }

};

A valid form could now incur further validation checks. Similarly, an invalid form could have invalid fields highlighted.

Feldvalidierung

Einzelne Felder verfügen über die folgenden Einschränkungsvalidierungseigenschaften:

• willValidate: gibt true zurück, wenn das Element ein Kandidat für die Einschränkungsvalidierung ist.

• validationMessage: die Validierungsmeldung. Dies wird eine leere Zeichenkette sein, wenn das Feld gültig ist.

• valitity: ein ValidityState-Objekt. Dieses verfügt über eine gültig-Eigenschaft, die auf true gesetzt ist, wenn das Feld gültig ist. Ist sie false, ist eine oder mehrere der folgenden Eigenschaften auf true gesetzt:

  ValidityState	Beschreibung
  .badInput	der Browser kann die Eingabe nicht verstehen
  .customError	eine benutzerdefinierte Gültigkeitsnachricht wurde gesetzt
  .patternMismatch	der Wert stimmt nicht mit dem angegebenen pattern-Attribut überein
  .rangeOverflow	der Wert ist größer als das max-Attribut
  .rangeUnderflow	der Wert ist kleiner als das min-Attribut
  .stepMismatch	der Wert passt nicht zu den step-Attributregeln
  .tooLong	die Zeichenfolgenlänge ist größer als das maxlength-Attribut
  .tooShort	die Zeichenfolgenlänge ist kleiner als das minlength-Attribut
  .typeMismatch	der Wert ist keine gültige E-Mail oder URL
  .valueMissing	ein erforderlicher Wert ist leer

Einzelne Felder verfügen über die folgenden Einschränkungsvalidierungsmethoden:

• setCustomValidity(message): Setzt eine Fehlermeldung für ein ungültiges Feld. Eine leere Zeichenkette muss übergeben werden, wenn das Feld gültig ist, oder das Feld bleibt für immer ungültig.
• checkValidity(): Gibt true zurück, wenn die Eingabe gültig ist. Die valitity.valid-Eigenschaft erfüllt dieselbe Funktion, aber checkValidity() löst auch ein invalid-Ereignis auf dem Feld aus, was möglicherweise nützlich sein könnte.

Die validateForm()-Handlerfunktion könnte jeden einzelnen Bereich durchlaufen und gegebenenfalls eine invalid-Klasse auf sein übergeordnetes Element anwenden:

function validateForm(e) {
  const form = e.target;
  if (form.checkValidity()) {
    // das Formular ist gültig - führe weitere Prüfungen durch
  }
  else {
    // das Formular ist ungültig - storniere das Absenden
    e.preventDefault();
    // wende ungültige Klasse an
    Array.from(form.elements).forEach(i => {
      if (i.checkValidity()) {
        // das Feld ist gültig - entferne die Klasse
        i.parentElement.classList.remove('invalid');
      }
      else {
        // das Feld ist ungültig - füge die Klasse hinzu
        i.parentElement.classList.add('invalid');
      }
    });
  }
};

Angenommen, Ihre HTML definiert ein E-Mail-Feld:

<div>
  <label for="email">email</label>
  <input type="email" id="email" name="email" required />
  <p class="help">Please enter a valid email address</p>
</div>

Das Skript wendet die invalid-Klasse auf das <div> an, wenn keine E-Mail angegeben ist oder ungültig ist. CSS kann die Validierungsmeldung anzeigen oder ausblenden, wenn das Formular eingereicht wird:

.help { display: none; }
.invalid .help { display: block; }
.invalid label, .invalid input, .invalid .help {
  color: red;
  border-color: red;
}

Erstellen eines benutzerdefinierten Formularvalidators

Der folgende Demonstrationsbeispiel zeigt ein Kontaktformular, das einen Benutzernamen und entweder eine E-Mail-Adresse, eine Telefonnummer oder beides erfordert:

Es wird mithilfe einer generischen Formularvalidierungsklasse namens FormValidate implementiert. Ein Formularelement wird bei der Instanziierung eines Objekts übergeben. Ein optionaler zweiter Parameter kann festgelegt werden:

• true zur Validierung jedes Felds, während der Benutzer mit ihm interagiert
• false (Standard) zur Validierung aller Felder nach dem ersten Absenden (feldbezogene Validierung tritt danach auf)

// Validierung des Kontaktformulars
const contactForm = new FormValidate(document.getElementById('contact'), false);

Ein .addCustom(field, func)-Methode definiert benutzerdefinierte Validierungsfunktionen. Der folgende Code stellt sicher, dass entweder das email– oder das tel-Feld gültig sind (beide haben keine required-Attribute):

// benutzerdefinierte Validierung - E-Mail und/oder Telefon
const
  email = document.getElementById('email'),
  tel = document.getElementById('tel');

contactForm.addCustom(email, f => f.value || tel.value);
contactForm.addCustom(tel, f => f.value || email.value);

A FormValidate object monitors both of the following:

• focusout-Ereignisse, die dann einzelne Felder überprüfen
• Formulare submit-Ereignisse, die dann jedes Feld überprüfen

Beide rufen die .validateField(field)-Methode auf, die prüft, ob ein Feld die standardmäßige Einschränkungsvalidierung besteht. Wenn dies der Fall ist, werden nacheinander alle benutzerdefinierten Validierungsfunktionen, die diesem Feld zugewiesen sind, ausgeführt. Alle müssen true zurückgeben, damit das Feld gültig ist.

Ungültige Felder erhalten eine invalid-Klasse, die auf das übergeordnete Element des Felds angewendet wird und eine rote Hilfe-Nachricht mithilfe von CSS anzeigt.

Schließlich ruft das Objekt eine benutzerdefinierte submit-Funktion auf, wenn das gesamte Formular gültig ist:

// benutzerdefiniertes Absenden
contactForm.submit = e => {
  e.preventDefault();
  alert('Form is valid!\n(open the console)');
  const fd = new FormData(e.target);
  for (const [name, value] of fd.entries()) {
    console.log(name + ': ' + value);
  }
}

Alternativ können Sie ein Standard addEventListener verwenden, um Formular submit-Ereignisse zu behandeln, da FormValidate verhindert, dass weitere Handler ausgeführt werden, wenn das Formular ungültig ist.

Form Finesse

Formulare sind die Grundlage aller Webanwendungen und Entwickler verbringen erhebliche Zeit mit der Bearbeitung von Benutzereingaben. Einschränkungsvalidierung wird gut unterstützt: Browser können die meisten Prüfungen durchführen und entsprechende Eingabemöglichkeiten anzeigen.

Empfehlungen:

• Verwenden Sie standardmäßige HTML-Eingabetypen, soweit möglich. Setzen Sie min, max, step, minlength, maxlength, pattern, required, inputmode und autocomplete-Attribute entsprechend.
• Wenn notwendig, verwenden Sie ein wenig JavaScript zur Aktivierung benutzerdefinierter Validierung und Nachrichten.
• Für komplexere Felder erweitern Sie die standardmäßigen Eingaben schrittweise.

Schlussendlich: vergessen Sie Internet Explorer!

Es besteht keine Notwendigkeit, eigene Fallback-Validierungsfunktionen zu implementieren, es sei denn, Ihre Kunden setzen hauptsächlich auf IE. Alle HTML5-Eingabefelder funktionieren in IE, benötigen aber möglicherweise mehr Benutzerinitiative. (Zum Beispiel erkennt IE nicht, wenn Sie eine ungültige E-Mail-Adresse eingeben.) Sie müssen die Daten immer noch auf dem Server validieren, also sollten Sie das als Grundlage für die IE-Fehlerprüfung nutzen.

Häufig gestellte Fragen (FAQs) zu HTML-Formularen und Einschränkungsvalidierung