Verwendung der HTML-Formularvalidierung und der Constraint Validation API

In HTML werden grundlegende Einschränkungen auf zwei Arten deklariert:

• Indem der semantisch am besten geeignete Wert für das type-Attribut des <input>-Elements gewählt wird, z. B. erzeugt die Wahl des Typs email automatisch eine Einschränkung, die überprüft, ob der Wert eine gültige E-Mail-Adresse ist.
• Indem Werte für Validierungs-bezogene Attribute gesetzt werden, die grundlegende Einschränkungen beschreiben, ohne dass JavaScript erforderlich ist.

Die intrinsischen Einschränkungen für das type-Attribut sind:

Für beide Eingabetypen können, wenn das multiple-Attribut gesetzt ist, mehrere Werte als kommagetrennte Liste angegeben werden. Wenn einer dieser Werte die hier beschriebene Bedingung nicht erfüllt, wird die Type mismatch Constraint-Verletzung ausgelöst.

Beachten Sie, dass die meisten Eingabetypen keine intrinsischen Einschränkungen haben, da einige von der Constraint-Validierung ausgeschlossen sind oder über einen Sanitierungsalgorithmus verfügen, der falsche Werte in einen korrekten Standardwert umwandelt.

Zusätzlich zu dem oben beschriebenen type-Attribut werden die folgenden Attribute verwendet, um grundlegende Einschränkungen zu beschreiben:

Die Constraint-Validierung erfolgt über die Constraint Validation API entweder für ein einzelnes Formularelement oder auf Formularebene, beim <form>-Element selbst. Die Constraint-Validierung erfolgt auf folgende Weise:

• Durch einen Aufruf der Methode checkValidity() oder reportValidity() einer formularassoziierten DOM-Schnittstelle, (HTMLInputElement, HTMLSelectElement, HTMLButtonElement, HTMLOutputElement oder HTMLTextAreaElement), die die Einschränkungen nur für dieses Element überprüft und ein Skript ermöglicht, diese Informationen zu erhalten. Die Methode checkValidity() gibt einen Boolean zurück, der angibt, ob der Wert des Elements seine Einschränkungen erfüllt. (Dies wird normalerweise vom Benutzeragenten beim Bestimmen, welche der CSS-Pseudoklassen, :valid oder :invalid, angewendet werden, getan.) Im Gegensatz dazu meldet die Methode reportValidity() dem Benutzer alle Verstöße gegen Einschränkungen.
• Durch einen Aufruf der Methode checkValidity() oder reportValidity() auf der HTMLFormElement-Schnittstelle.
• Durch das Absenden des Formulars selbst.

Das Aufrufen von checkValidity() wird als statische Überprüfung der Einschränkungen bezeichnet, während das Aufrufen von reportValidity() oder das Absenden des Formulars als interaktive Überprüfung der Einschränkungen bezeichnet wird.

Mit JavaScript und der Constraint API ist es möglich, komplexere Einschränkungen zu implementieren, zum Beispiel Einschränkungen, die mehrere Felder kombinieren, oder Einschränkungen, die komplexe Berechnungen beinhalten.

Im Wesentlichen besteht die Idee darin, JavaScript bei einem Formularfeldereignis (wie onchange) auszulösen, um zu berechnen, ob die Einschränkung verletzt wird, und dann die Methode field.setCustomValidity() zu verwenden, um das Ergebnis der Validierung festzulegen: ein leerer String bedeutet, dass die Einschränkung erfüllt ist, und jeder andere String bedeutet, dass ein Fehler vorliegt und dieser String die Fehlermeldung ist, die dem Benutzer angezeigt wird.

Das Format einer Postleitzahl variiert von Land zu Land. Viele Länder erlauben ein optionales Präfix mit dem Ländercode (wie D- in Deutschland, F- in Frankreich und CH- in der Schweiz). Einige Länder verwenden nur eine feste Anzahl von Ziffern in Postleitzahlen, während andere, wie das Vereinigte Königreich, komplexere Formate haben, die Buchstaben an bestimmten Positionen erlauben.

Als Beispiel fügen wir ein Skript hinzu, das die Constraint-Validierung für ein Formular prüft:

<form>
  <label for="postal-code">Postal Code: </label>
  <input type="text" id="postal-code" />
  <label for="country">Country: </label>
  <select id="country">
    <option value="ch">Switzerland</option>
    <option value="fr">France</option>
    <option value="de">Germany</option>
    <option value="nl">The Netherlands</option>
  </select>
  <input type="submit" value="Validate" />
</form>

Dies zeigt das folgende Formular an:

Zuerst schreiben wir eine Funktion, die die Einschränkung selbst überprüft:

function checkPostalCode() {
  // For each country, defines the pattern that the postal code has to follow
  const constraints = {
    ch: [
      "^(CH-)?\\d{4}$",
      "Swiss postal codes must have exactly 4 digits: e.g. CH-1950 or 1950",
    ],
    fr: [
      "^(F-)?\\d{5}$",
      "French postal codes must have exactly 5 digits: e.g. F-75012 or 75012",
    ],
    de: [
      "^(D-)?\\d{5}$",
      "German postal codes must have exactly 5 digits: e.g. D-12345 or 12345",
    ],
    nl: [
      "^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$",
      "Dutch postal codes must have exactly 4 digits, followed by 2 letters except SA, SD and SS",
    ],
  };

  // Read the country id
  const country = document.getElementById("country").value;

  // Get the NPA field
  const postalCodeField = document.getElementById("postal-code");

  // Build the constraint checker
  const constraint = new RegExp(constraints[country][0], "");
  console.log(constraint);

  // Check it!
  if (constraint.test(postalCodeField.value)) {
    // The postal code follows the constraint, we use the ConstraintAPI to tell it
    postalCodeField.setCustomValidity("");
  } else {
    // The postal code doesn't follow the constraint, we use the ConstraintAPI to
    // give a message about the format required for this country
    postalCodeField.setCustomValidity(constraints[country][1]);
  }
}

Dann verknüpfen wir es mit dem onchange-Ereignis für das <select> und das oninput-Ereignis für das <input>:

window.onload = () => {
  document.getElementById("country").onchange = checkPostalCode;
  document.getElementById("postal-code").oninput = checkPostalCode;
};

Eine weitere häufige Einschränkung ist, die Größe einer hochzuladenden Datei zu begrenzen. Diese Überprüfung auf der Clientseite bevor die Datei an den Server übertragen wird, erfordert die Kombination der Constraint Validation API, insbesondere der Methode field.setCustomValidity(), mit einer anderen JavaScript-API, hier der File API.

Hier ist der HTML-Teil:

<label for="fs">Select a file smaller than 75 kB: </label>
<input type="file" id="fs" />

Dies zeigt:

Das JavaScript liest die ausgewählte Datei, verwendet die Methode File.size(), um deren Größe zu ermitteln, vergleicht sie mit dem (hart codierten) Limit und ruft die Constraint API auf, um den Browser zu informieren, ob eine Verletzung vorliegt:

function checkFileSize() {
  const fs = document.getElementById("fs");
  const files = fs.files;

  // If there is (at least) one file selected
  if (files.length > 0) {
    if (files[0].size > 75 * 1000) {
      // Check the constraint
      fs.setCustomValidity("The selected file must not be larger than 75 kB");
      fs.reportValidity();
      return;
    }
  }
  // No custom constraint violation
  fs.setCustomValidity("");
}

Schließlich verbinden wir die Methode mit dem richtigen Ereignis:

window.onload = () => {
  document.getElementById("fs").onchange = checkFileSize;
};

Abgesehen vom Setzen von Einschränkungen möchten Webentwickler kontrollieren, welche Nachrichten den Benutzern angezeigt werden und wie sie gestylt sind.

Das Aussehen der Elemente kann über CSS-Pseudoklassen gesteuert werden.

:required und :optional CSS-Pseudoklassen

Die :required und :optional Pseudoklassen erlauben das Schreiben von Selektoren, die Formularelemente ansprechen, die das required-Attribut haben oder nicht haben.

:placeholder-shown CSS-Pseudoklasse

Siehe :placeholder-shown.

:valid :invalid CSS-Pseudoklassen

Die :valid und :invalid Pseudoklassen werden verwendet, um <input>-Elemente darzustellen, deren Inhalt gemäß der Typ-Einstellung des Eingabefelds entweder validiert oder nicht validiert wird. Diese Klassen ermöglichen es dem Benutzer, gültige oder ungültige Formularelemente zu stylen, um das Erkennen von Elementen, die entweder korrekt oder fehlerhaft formatiert sind, zu erleichtern.

Die folgenden Punkte können bei der Steuerung des Textes einer Constraint-Verletzung helfen:

• Die Methode setCustomValidity(message) bei den folgenden Elementen:

  • <fieldset>. Hinweis: Das Setzen einer benutzerdefinierten Fehlermeldung bei fieldset-Elementen verhindert in den meisten Browsern nicht die Formularübermittlung.
  • <input>
  • <output>
  • <select>
  • Absenden-Schaltflächen (erstellt mit entweder einem <button>-Element vom Typ submit oder einem input-Element vom Typ submit. Andere Arten von Schaltflächen beteiligen sich nicht an der Constraint-Validierung.
  • <textarea>

• Die ValidityState-Schnittstelle beschreibt das Objekt, das durch die validity-Eigenschaft der oben aufgeführten Elementtypen zurückgegeben wird. Sie repräsentiert verschiedene Möglichkeiten, wie ein eingegebener Wert ungültig sein kann. Gemeinsam helfen sie zu erklären, warum der Wert eines Elements nicht validiert wird, wenn er nicht gültig ist.