HTML/Formulare/Validierung von Formularen

Aus SELFHTML-Wiki
< HTML | Formulare(Weitergeleitet von Required)
Wechseln zu: Navigation, Suche

Sie können mit HTML5 Eingaben bereits vor dem Absenden des Formulars validieren, d. h. auf ihre Gültigkeit überprüfen. So verhindern Sie ein Senden ungültiger Daten, die erst serverseitig geprüft werden müssen und im Misserfolgsfall dann erneut eingegeben werden müssen.

Beachten Sie: Eine clientseitige Validierung von Formulardaten kann eine serverseitige Validierung keinesfalls ersetzen, sondern nur den Bedienkomfort eines Nutzers erhöhen, indem das Absenden ungeeigneter Daten im Vorfeld zu vermeiden versucht wird. Diese Filterung kann jedoch umgangen werden, weshalb man sich auf der Serverseite niemals auf solche Prüfmechanismen verlassen darf.

Inhaltsverzeichnis

[Bearbeiten] Mindest- und Maximallänge von Eingaben mit min-/maxlength

Durch das maxlength- Attribut können Sie eine Maximallänge der Eingabe festlegen.

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

Details: caniuse.com

Analog dazu können Sie mit dem minlength-Attribut eine Mindestlänge der Eingabe festlegen.

  • HTML5
  • Chrome
  • Leer
  • Leer
  • Opera
  • Leer

Details: caniuse.com

Beispiel: Mindest- bzw. Maximallänge ansehen …
<form>
  <label for="benutzername">Benutzername</label>
  <input id="benutzername" minlength="5" maxlength="8">
 
  <label for="passwd">Passwort</label>
  <input type="password"  minlength="5" maxlength="8">
 
  <button>anmelden</button>
</form>
Chrome und Opera geben bei einer Eingabe von weniger als 5 Zeichen eine Fehlermeldung aus. Bei einer Eingabe von mehr als 8 Zeichen schneiden alle Browser weitere Eingaben ab.

[Bearbeiten] Pflichtangaben mit required

Durch die Angabe von required kann eine Eingabe erzwungen werden. Ein vorzeitiges Absenden des Formulars erzeugt eine browsereigene Fehlermeldung und das noch auszufüllende Formularfeld wird hervorgehoben. Diese interne Pflichtfeldprüfung hat diverse Vorteile gegenüber einer JavaScript-Lösung, insbesondere was die Zugänglichkeit angeht: Assistierende Software, wie Screenreader, können dieses Attribut auswerten und dem Nutzer auf diese Weise mitteilen, was von ihm verlangt wird.

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

Details: caniuse.com

Beispiel: Pflichtangaben ansehen …
<label for="bname">Benutzername</label> 
<input id="bname" size="30" maxlength="30" required>
 
<label for="passwd">Passwort</label>  
<input type="password" id="passwd" size="30" maxlength="40" required>

Außerdem gibt es die CSS-Pseudoklassen :valid und :invalid, die es erlauben, gültige und ungültige Felder getrennt voneinander zu stylen. Dieses Beispiel zeigt, wie man Formulare mit Hilfe der Pseudoklassen :valid und :invalid weiter gestalten kann.

Falls es darüber hinaus trotzdem Bedarf an eigener clientseitiger Logik gibt, dann gibt es eine standardisierte JavaScript Constraint Validation API, die in Symbiose mit diesen Features arbeitet. Für ältere Browser gibt es Polyfills/Shims.[1]

[Bearbeiten] vorgeschriebene Formate mit pattern

Ein pattern ist ein Suchmuster, genauer ein regulärer Ausdruck. Es wird geprüft, ob der Inhalt auf dieses Suchmuster zutrifft.

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

Details: caniuse.com

Beispiel: Pflichtangaben ansehen …
<label for="bname">Benutzername</label>
<input id="bname" required>
 
<label for="passwd">Passwort</label>
<input id="passwd" type="password" required pattern="67kgYx@3rt" 
       title="Das Passwort lautet: &quot;67kgYx@3rt&quot;ohne Anführungszeichen.">
 
<label for="mail">E-Mail</label>
<input id="mail" type="email">
 
<label for="gebdat">Geburtsdatum</label>
<input id="gebdat" 
       pattern="^(31|30|0[1-9]|[12][0-9]|[1-9])\.(0[1-9]|1[012]|[1-9])\.((18|19|20)\d{2}|\d{2})$">
 
<label for="text">Leerzeichen verboten</label>
<input id="text" pattern="^\S*$">
  • Das Eingabefeld für den Benutzernamen ist ein Pflichtfeld und deshalb rot markiert, bis eine Eingabe erfolgt.
  • Das Eingabefeld für das Passwort ist vom type="password", sodass die Eingabe verdeckt erfolgt. Das Suchmuster mit dem vorgegebenen String wird mit der Eingabe verglichen.
  • Die E-Mail wird durch type="email" bereits intern auf Plausibilität überprüft:
  • Bei der Eingabe des Geburtsdatums wird ein Suchmuster vorgegeben, das verschiedene deutsche Datumsformate erlaubt. Dabei ist das Geburtsjahr auf das 19. - 21. Jahrhundert beschränkt. Das Jahr kann aber auch zweistellig eingegeben werden.
Empfehlung: Verwenden Sie zur Datumseingabe besser mehrere select-Elemente oder input-Elemente des typs date.
  • Im letzten Feld darf die Eingabe kein Leerzeichen enthalten.

[Bearbeiten] Quellen

  1. MDN: JavaScript-API

[Bearbeiten] siehe auch


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML