HTMLInputElement: reportValidity()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since December 2018.

Die reportValidity()-Methode der HTMLInputElement-Schnittstelle führt die gleichen Gültigkeitsprüfschritte aus wie die checkValidity()-Methode. Zusätzlich zeigt der Browser das Problem dem Benutzer an, wenn das invalid-Ereignis nicht abgebrochen wird.

Syntax

js
reportValidity()

Parameter

Keine.

Rückgabewert

Gibt true zurück, wenn der Wert des Elements keine Gültigkeitsprobleme aufweist; andernfalls false.

Beispiele

Grundlegende Verwendung

HTML

Wir fügen ein Formular mit einem erforderlichen Zahlenfeld und zwei Schaltflächen hinzu: eine zur Überprüfung des Formulars und eine zur Übermittlung.

html
<form action="#" method="post">
  <p>
    <label for="age">Your (21 to 65) </label>
    <input type="number" name="age" required id="age" min="21" max="65" />
  </p>
  <p>
    <button type="submit">Submit</button>
    <button type="button" id="report">reportValidity()</button>
  </p>
  <p id="log"></p>
</form>

JavaScript

Wenn die Schaltfläche "reportValidity()" aktiviert wird, verwenden wir die reportValidity()-Methode, um zu prüfen, ob der Wert der Eingabe ihre Einschränkungen erfüllt. Wir protokollieren den Rückgabewert. Wenn false, zeigen wir auch die Validierungsnachricht an und erfassen das invalid-Ereignis.

js
const output = document.querySelector("#log");
const reportButton = document.querySelector("#report");
const ageInput = document.querySelector("#age");

ageInput.addEventListener("invalid", () => {
  console.log("Invalid event fired.");
});

reportButton.addEventListener("click", () => {
  const reportVal = ageInput.reportValidity();
  output.innerHTML = `"reportValidity()" returned: ${reportVal}`;
  if (!reportVal) {
    output.innerHTML += `<br />Validation message: "${ageInput.validationMessage}"`;
  }
});

Ergebnisse

Wenn false, erscheint eine Fehlermeldung, wird ein invalid-Ereignis ausgelöst, und wir protokollieren dieses Ereignis in die Konsole, falls der Wert fehlt, unter 21 liegt, über 65 liegt oder anderweitig ungültig ist.

Benutzerdefinierte Fehlermeldung

Dieses Beispiel zeigt, wie eine benutzerdefinierte Fehlermeldung einen false-Rückgabewert verursachen kann, selbst wenn der Wert ansonsten gültig ist.

HTML

Wir fügen der HTML-Beispiel aus dem vorherigen Beispiel einen "Fix me"-Button hinzu.

html
<button type="button" id="fix">Fix issues</button>

JavaScript

Wir erweitern das JavaScript aus dem grundlegenden Beispiel und fügen eine Funktion hinzu, die die HTMLInputElement.setCustomValidity()-Methode nutzt, um benutzerdefinierte Fehlermeldungen bereitzustellen. Die validateAge()-Funktion setzt die Fehlermeldung nur dann auf einen leeren String, wenn die Eingabe gültig ist UND die enableValidation-Variable true ist, wobei enableValidation false bleibt, bis die Schaltfläche "Fix issues" aktiviert wurde.

javascript
const output = document.querySelector("#log");
const reportButton = document.querySelector("#report");
const ageInput = document.querySelector("#age");
const fixButton = document.querySelector("#fix");
let enableValidation = false;

fixButton.addEventListener("click", (e) => {
  enableValidation = true;
  fixButton.innerHTML = "Error fixed";
  fixButton.disabled = true;
});

reportButton.addEventListener("click", () => {
  validateAge();
  const reportVal = ageInput.reportValidity();
  output.innerHTML = `"reportValidity()" returned: ${reportVal}`;
  if (!reportVal) {
    output.innerHTML += `<br />Validation message: "${ageInput.validationMessage}"`;
  }
});

const validateAge = () => {
  const validityState_object = ageInput.validity;
  if (validityState_object.valueMissing) {
    ageInput.setCustomValidity("Please set an age (required)");
  } else if (ageInput.rangeUnderflow) {
    ageInput.setCustomValidity("Your value is too low");
  } else if (ageInput.rangeOverflow) {
    ageInput.setCustomValidity("Your value is too high");
  } else if (enableValidation) {
    // sets to empty string if valid AND enableValidation has been set to true
    ageInput.setCustomValidity("");
  }
};

Ergebnisse

Wenn Sie die Schaltfläche "reportValidity()" aktivieren, bevor Sie ein Alter eingeben, gibt die reportValidity()-Methode false zurück, da die required-Einschränkungsvalidierung nicht erfüllt ist. Diese Methode löst ein invalid-Ereignis auf der Eingabe aus und meldet dem Benutzer das Problem, indem sie die benutzerdefinierte Fehlermeldung "Please set an age (required)" anzeigt. Solange eine benutzerdefinierte Fehlermeldung festgelegt ist, wird das Aktivieren der Schaltfläche "reportValidity()" weiterhin einen Fehler anzeigen, auch wenn Sie ein gültiges Alter auswählen. Um die Validierung zu aktivieren, müssen wir die benutzerdefinierte Fehlermeldung auf den leeren String setzen, was durch Klicken auf die Schaltfläche "Fix issues" getan wird.

Spezifikationen

Specification
HTML Standard
# dom-cva-reportvalidity-dev

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch