1. Web
  2. Web-APIs
  3. HTMLButtonElement
  4. reportValidity()

Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

HTMLButtonElement: reportValidity()-Methode

Baseline
Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2018 browserübergreifend verfügbar.

Die Methode reportValidity() der Schnittstelle HTMLButtonElement führt dieselben Schritte zur Gültigkeitsprüfung aus wie die Methode checkValidity(). Wenn das Ereignis invalid nicht abgebrochen wird, zeigt der Browser dem Benutzer außerdem das Problem an. Die Methode gibt immer true zurück, wenn das <button>-Element kein Kandidat für die Constraint-Validierung ist (wenn seine Eigenschaft willValidate den Wert false hat).

Syntax

js
reportValidity()

Parameter

Keine.

Rückgabewert

Gibt true zurück, wenn der Wert des Elements keine Gültigkeitsprobleme aufweist oder das Element kein Kandidat für die Constraint-Validierung ist; andernfalls gibt die Methode false zurück.

Beispiele

Dieses eher ungewöhnliche Beispiel zeigt, wie ein Button ungültig gemacht werden kann.

HTML

Wir erstellen zwei Buttons:

html
<p>
  <button id="example" type="submit" value="fixed">THIS BUTTON</button>
</p>
<p>
  <button type="button" id="report">reportValidity()</button>
</p>

<p id="log"></p>

CSS

Wir fügen etwas CSS hinzu, darunter Stile für :valid und :invalid für unseren Button:

css
button {
  background-color: #3333aa;
  border: none;
  font-size: 1.3rem;
  padding: 5px 10px;
  color: white;
}
button:invalid {
  background-color: #aa3333;
}
button:valid {
  background-color: #33aa33;
}

JavaScript

Wir fügen eine Funktion hinzu, die den Wert, den Inhalt und die Validierungsmeldung des Beispiel-Buttons umschaltet:

js
const reportButton = document.querySelector("#report");
const exampleButton = document.querySelector("#example");
const output = document.querySelector("#log");

reportButton.addEventListener("click", () => {
  const reportVal = exampleButton.reportValidity();
  output.innerHTML = `reportValidity returned: ${reportVal} <br/> custom error: ${exampleButton.validationMessage}`;
});

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

exampleButton.addEventListener("click", () => {
  if (exampleButton.value === "error") {
    breakOrFixButton("fixed");
  } else {
    breakOrFixButton("error");
  }
  output.innerHTML = `validation message: ${exampleButton.validationMessage} <br/> custom error: ${exampleButton.validationMessage}`;
});

function breakOrFixButton() {
  const state = toggleButton();
  if (state === "error") {
    exampleButton.setCustomValidity("This is a custom error message");
  } else {
    exampleButton.setCustomValidity("");
  }
}

function toggleButton() {
  if (exampleButton.value === "error") {
    exampleButton.value = "fixed";
    exampleButton.innerHTML = "No error";
  } else {
    exampleButton.value = "error";
    exampleButton.innerHTML = "Custom error";
  }
  return exampleButton.value;
}

Ergebnis

Der Button ist standardmäßig gültig. Aktivieren Sie „THIS BUTTON“, um den Wert und den Inhalt zu ändern und eine benutzerdefinierte Fehlermeldung hinzuzufügen. Wenn Sie den Button „reportValidity()“ aktivieren, wird die Gültigkeit des Buttons geprüft. Falls der Button aufgrund der Meldung die Constraint-Validierung nicht besteht, wird die benutzerdefinierte Fehlermeldung angezeigt und ein invalid-Ereignis ausgelöst.

Spezifikationen

Spezifikation
HTML
# dom-cva-reportvalidity-dev

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.
Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden