JavaScript: Forms-API

Mit der Forms-API kann ein Formular vor dem Absenden geprüft werden.

Für das Formular ist ein Eventlisterner installiert, der beim Event invalid die Funktion validation aufruft.

Bei diesem Eventlistener muss der Formularname (hier formsapi) angegeben werden.

  document.formsapi.addEventListener("invalid", validation, true);

Für den Button Speichern ist ein Eventlisterner installiert, der die Funktion speichern aufruft.

  document.getElementById("speichern").addEventListener("click", speichern, false);

Im Formular unten ist das Feld e-Mail mit dem Typ email, Zahl mit number und Betrag mit einem Pattern definiert.

Ist der Button vom Typ submit wird die Überprüfung des Formulars direkt aufgerufen. Beim Button mit dem Typ button muss die Überprüfung in der Funktion speichern aufgerufen werden.

Bei der Überprüfung wird für jedes nicht valide Feld die Funktion validation aufgerufen.

Wenn ein Fehler aufgetreten ist kann jedes Feld überprüft werden.

Dazu wird mit v_element.validity.STATUS geprüft.

STATUS kann folgende Werte haben:

valueMissing

typeMismatch

patternMismatch

tooLong (maxlength deklariert)

rangeUnderflow (min deklariert)

rangeOverflow (max deklariert)

stepMismatch (step deklariert)

validation() speichern()

Bei diesem Formular sind beide Felder required.

Der Butten Senden ist vom Typ submit. Hier wird impliziet die Feldprüfung aufgerufen.

Bei diesem Formular gibt es einen Eventlistener, der bei jedem Tastendruck (input) die Funktion checkval aufruft.

  document.getElementById("fpemail").addEventListener("input", checkval, false);

In der Funktion checkval wird mit validity.valid das Feld des Events überprüft.

checkval()

Es kann notwendig sein Felder für eine Eingabe zu sperren, um sie dann bei einer bestimmten Konstellation freizugeben.

Ein input-Feld wird mit readonly in HTML gesperrt.

In Java-Script wird mit der folgenden Anweisung das Feld freigeschaltet.

    document.getElementById("DOM-ID").readOnly = true;

Um dem Benutzer die Sperrung bzw. Freigabe zu zeigen, sollte das Feld, wenn es gesperrt ist z.B. farblich unterlegt sein.