Formulare/Eingaben mit JavaScript validieren

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Es ist sinnvoll HTML-basierte Formulare nicht erst serverseitig, sondern schon vor dem Absenden clientseitig auf Validität zu überprüfen.

Ungültige Formulareingaben führen in der Regel zu einem Abbruch und Neuladens des Formular; oft geben Seitenbesucher die Daten kein zweites Mal ein, sondern verlassen die Seite lieber. In diesem Artikel lesen Sie, wie Sie Besuchern durch Gültigkeitsüberprüfungen und individualisierte Fehlermeldungen das Ausfüllen von Formularen erleichtern.

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.

browsereigene Validierung mit HTML5

→ Formulare/browsereigene Validierung

HTML5 hat bereits einige Möglichkeiten input-Elemente schon vor dem Absenden durch den Browser zu validieren. Mit den Pseudoklassen :valid und :invalid können Formularelemente auf die Gültigkeit einer Eingabe überprüft werden. Das Ergebnis kann mit den Möglichkeiten von CSS entsprechend angezeigt werden.

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.

Mit den Attributen min, max und maxlength können Sie Ober- und Untergrenzen festlegen.

Pflichtfelder erhalten das required-Attribut. Solange die Eingaben nicht valide sind, wird ein Absenden des Formulars verhindert und eine Fehlermeldung ausgegeben.

Screenshot von Fehlermeldungen bei Pflichtangabe

Allerdings sind diese Meldungen 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.

Constraint Validation API

Die Constraint Validation API (zu deutsch etwa: Gültigkeitsüberprüfung, Anforderungsprüfung) stellt weitere Eigenschaften und Methoden zur Verfügung.

Browserunterstützung
caniuse.com
  • validationMessage: eine individualisierte Meldung, die die Einschränkungen der Gültigkeitsprüfung beschreibt oder einen leeren String, wenn das Element nicht überprüft werden kann (willValidate liefert false), oder der Wert des Elements die Gültigkeitsprüfung besteht
  • validity: Ein Objekt, das den Gültigkeitszustand des Elements beschreibt
    • validity.customError: gibt true zurück, wenn das Element einen benutzerdefinierten Fehler hat; sonst false
    • validity.patternMismatch: gibt true zurück, wenn der Wert des Elements nicht dem pattern entspricht; sonst false.
    true → Pseudoklasse :invalid .
    • validity.rangeOverflow: gibt true zurück, wenn der Wert des Elements höher als das Maximum; sonst false.
    true → Pseudoklassen :invalid und :out-of-range
    • validity.rangeUnderflow gibt true zurück, wenn der Wert des Elements niedriger als das festgelegte Minimum ist; sonst false.
    true → Pseudoklassen :invalid und :out-of-range
    • validity.stepMismatch gibt true zurück, wenn der Wert des Elements nicht den Regeln des step-Attributs entspricht; sonst false .
    true → Pseudoklassen :invalid und :out-of-range
    • validity.tooLong: gibt true zurück, wenn der Wert des Elements länger als die festgelegte Maximallänge ist; sonst false
    true → Pseudoklassen :invalid and :out-of-range
    • validity.typeMismatch gibt true zurück, wenn der Wert des Elements nicht in der korrekten Schreibweise ist; sonst false.
    true → Pseudoklasse :invalid
    • validity.valid: gibt true zurück, wenn der Wert des Elements keine Gültigkeitsprobleme hat; sonst false.
    true → Pseudoklasse :valid – sonst die Pseudoklasse :invalid .
    • validity.valueMissing: gibt true wenn ein Pflichtfeld noch keinen Wert hat; sonst false.
    true → Pseudoklasse :invalid
  • willValidate gibt true zurück, wenn das Element beim Absenden des Formulars auf seine Gültigkeit überprüft wird; sonst false.


Constraint validation API Methoden

  • checkValidity(): gibt true , wenn der Wert des Elements keine Gültigkeitsprobleme hat; sonst false
    Wenn das Element ungültig ist, wird am Element ein invalid-Ereignis gefeuert.
  • setCustomValidity(message): fügt eine individualisierte Fehlermeldung hinzu.
    Wenn Sie eine solche Fehlermeldung setzen, wird das Element als ungültig angesehen und der betreffende Fehler wird angezeigt. So können Sie eine genauere Fehlermeldung als die der standardisierten Constraint Validation API anzeigen.
    Wenn das Argument aus einem leeren String besteht, ist der Fehler nicht mehr vorhanden.

Anwendungsbeispiel

browsereigene Validierung abschalten

Um individualisierte Fehlermeldungen anzeigen zu können, muss zuerst die browsereigene Validierung abgeschaltet werden. Dies lässt sich mit dem novalidate-Attribut des form-Elements erreichen:

novalidate 
<form novalidate>
    <input type="text" required />
    <button>Absenden!</button>
</form>

Auch wenn das input-Feld ein Pflichtfeld ist, kann das Formular leer abgesendet werden, da das novalidate-Attribut des form-Node gesetzt ist.


Alternativ können Sie input-Felder und Buttons mit dem formnovalidate-Attribut von einer Gültigkeitsüberprüfung ausnehmen.

formnovalidate 
<form>
    <input type="text" required />
    <button formnovalidate>Zwischenstand speichern</button>
</form>

Auch wenn das input-Feld ein Pflichtfeld ist, kann das Formular leer abgesendet werden, da das formnovalidate-Attribut des button-Elements gesetzt ist.


Fehlermeldungen mit CSS gestalten

Genauso wichtig wie das Finden von Fehlern ist das Anzeigen von Fehlern. Durch die Pseudoklassen :valid und :invalid können Sie fehlerhafte bzw. gültige Eingaben per CSS sicht- und unterscheidbar machen.

Wie im obigen Screenshot ersichtlich, unterscheidet sich die Darstellung in den Browsern zum Teil erheblich.

Normalisieren von Fehlermeldungen 
:invalid {
    box-shadow: none; /* FF */
    outline: 0;       /* IE */
}

Um den Schatten und Außenrand bei Firefox und IE zu entfernen, werden diese auf 0 gesetzt. Für Chrome und Opera ist dies nicht nötig.


Ein Gestalten der Sprechblase ist nur in den webkit-Browsern mit folgenden nicht-standardisierten Pseudoelementen möglich.

Gestalten der Sprechblase in webkit-Browsern 
::-webkit-validation-bubble {}
::-webkit-validation-bubble-message {}
::-webkit-validation-bubble-arrow {}
::-webkit-validation-bubble-arrow-clipper {}

Eine Alternative ist das Abschalten der browsereigenen Fehlermeldungen.

Abschalten der Sprechblasen 
var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
  forms[i].addEventListener('invalid', function(e) {
    e.preventDefault();

    //eigene Sprechblase mit individualisierter Fehlermeldung.
    showOwnErrorMessage();   
  }, true);
}

Eigene Fehlermeldungen

Das Bestätigen von Passwörtern durch eine erneute Eingabe ist einer der Anwendungsfälle, in denen immer auf JavaScript zurückgegriffen werden muss.

Passwort bestätigen ansehen …
  <form>
    <fieldset>
      <legend>Passwort bestätigen</legend>
      <label for="password1">Passwort:</label>
      <input type="password" required id="password1" />
  
      <label for="password2">Passwort bestätigen:</label>
      <input type="password" required id="password2" />

      <button>Absenden</button>
    </fieldset>
  </form>

var password1 = document.getElementById('password1');
var password2 = document.getElementById('password2');

var checkPasswordValidity = function() {
    if (password1.value != password2.value) {
        password2.setCustomValidity('Passwörter müssen übereinstimmen!');
    } else {
        password2.setCustomValidity('');
    }        
};

password1.addEventListener('change', checkPasswordValidity);
password2.addEventListener('change', checkPasswordValidity);

Bei jeder Änderung der Passwörter wird die Funktion checkPasswordValidity() aufgerufen. Sie prüft, ob die Passwörter gleich sind und setzt sonst mit setCustomValidity() eine Fehlermeldung, die beim versuchten Absenden ausgegeben wird.


Siehe auch

Weblinks

Polyfills

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Formulare/Eingaben_mit_JavaScript_validieren&oldid=98826“