Einschränkungen bei Validierung

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

• Durch die Wahl des semantisch passendsten Wertes für das type-Attribut des <input>-Elements, 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.
• Durch das Setzen von Werten auf validierungsbezogenen Attributen, wodurch grundlegende Einschränkungen beschrieben werden können, ohne dass JavaScript benötigt wird.

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

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

Beachten Sie, dass die meisten Eingabetypen keine intrinsischen Einschränkungen haben, da einige von der Einschränkungsvalidierung ausgeschlossen sind oder einen Reinigungsalgorithmus haben, 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 Einschränkungsvalidierung erfolgt mittels der Constraint Validation API entweder auf einem einzelnen Formularelement oder auf der Formularebene selbst, auf dem <form>-Element. Die Einschränkungsvalidierung erfolgt auf folgende Weise:

• Durch einen Aufruf der Methoden checkValidity() oder reportValidity() einer formularassoziierten DOM-Schnittstelle, (HTMLInputElement, HTMLSelectElement, HTMLButtonElement, HTMLOutputElement oder HTMLTextAreaElement), die die Einschränkungen nur für dieses Element bewertet, was einem Skript ermöglicht, diese Information zu erhalten. Die Methode checkValidity() gibt einen Boolean zurück, der angibt, ob der Wert des Elements seine Einschränkungen erfüllt. (Dies wird in der Regel gemacht, wenn der Benutzeragent bestimmt, welche der CSS-Pseudoklassen, :valid oder :invalid, zutrifft.) Im Gegensatz dazu berichtet die Methode reportValidity() dem Benutzer über eventuelle Einschränkungsfehler.
• Durch einen Aufruf der Methoden checkValidity() oder reportValidity() auf der HTMLFormElement Schnittstelle.
• Durch das tatsächliche Absenden des Formulars.

Das Aufrufen von checkValidity() wird statische Validierung der Einschränkungen genannt, während das Aufrufen von reportValidity() oder das Absenden des Formulars interaktive Validierung der Einschränkungen genannt wird.

Unter Verwendung von JavaScript und der Constraint API ist es möglich, komplexere Einschränkungen zu implementieren, wie beispielsweise Einschränkungen, die mehrere Felder kombinieren, oder Einschränkungen, die komplexe Berechnungen erfordern.

Im Wesentlichen ist die Idee, JavaScript bei einem bestimmten Ereignis eines Formularfelds (wie onchange) auszulösen, um zu berechnen, ob eine Einschränkung verletzt ist, 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 es einen Fehler gibt und dieser String die Fehlermeldung ist, die dem Benutzer angezeigt wird.

Das Format der Postleitzahl variiert von Land zu Land. Nicht nur erlauben die meisten Länder eine optionale Präfix mit dem Ländercode (wie D- in Deutschland, F- in Frankreich oder der Schweiz), sondern einige Länder haben Postleitzahlen mit lediglich einer festen Anzahl von Ziffern; andere, wie das Vereinigte Königreich, haben komplexere Strukturen, die an bestimmten Positionen Buchstaben erlauben.

Als Beispiel werden wir ein Skript hinzufügen, das die Einschränkungsvalidierung für ein Formular überprü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 dem 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 besteht darin, die Größe einer hochzuladenden Datei zu begrenzen. Dies clientseitig zu überprüfen, bevor die Datei an den Server übertragen wird, erfordert die Kombination der Constraint Validation API, und besonders der Methode field.setCustomValidity(), mit einer anderen JavaScript API, hier der Datei-API.

Hier ist der HTML-Teil:

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

Dies wird angezeigt:

Das JavaScript liest die ausgewählte Datei, nutzt die Methode File.size(), um deren Größe zu erhalten, vergleicht diese mit dem (hart kodierten) Limit und ruft die Constraint API auf, um den Browser über einen Verstoß zu informieren:

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 verknüpfen 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 diese gestaltet sind.

Das Erscheinungsbild von Elementen kann über CSS-Pseudoklassen gesteuert werden.

:required und :optional CSS-Pseudoklassen

Die :required und :optional Pseudoklassen ermöglichen das Schreiben von Selektoren, die Formularelemente auswählen, die das required-Attribut besitzen, oder die es nicht besitzen.

:placeholder-shown CSS-Pseudoklasse

Siehe :placeholder-shown.

:valid :invalid CSS-Pseudoklassen

Die :valid und :invalid Pseudoklassen repräsentieren <input>-Elemente, deren Inhalt gemäß den Typeneinstellungen des Eingabefelds validiert oder nicht validiert wird. Diese Klassen ermöglichen es dem Benutzer, gültige oder ungültige Formularelemente zu gestalten, um es einfacher zu machen, Elemente zu identifizieren, die entweder korrekt oder falsch formatiert sind.

Die folgenden Punkte können helfen, den Text eines Einschränkungsverstoßes zu steuern:

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

  • <fieldset>. Hinweis: Das Setzen einer benutzerdefinierten Gültigkeitsmeldung auf Fieldset-Elementen verhindert nicht die Formularübermittlung in den meisten Browsern.
  • <input>
  • <output>
  • <select>
  • Absende-Schaltflächen (erstellt mit entweder einem <button>-Element mit dem Typ submit oder einem input-Element mit dem submit-Typ. Andere Arten von Schaltflächen nehmen nicht an der Einschränkungsvalidierung teil.)
  • <textarea>

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