HTMLButtonElement: 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 des HTMLButtonElement-Interfaces führt dieselben Gültigkeitsprüfungen durch wie die checkValidity()-Methode. Zusätzlich zeigt der Browser, falls das invalid-Ereignis nicht abgebrochen wird, das Problem dem Benutzer an.

Syntax

js
reportValidity()

Parameter

Keine.

Rückgabewert

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

Beispiele

Dieses weit hergeholte Beispiel demonstriert, wie ein Button ungültig gemacht werden kann.

HTML

Wir erstellen ein Formular, das nur wenige Schaltflächen enthält:

html
<form action="#" id="form" method="post">
  <p>
    <input type="submit" value="Submit" />
    <button id="example" type="submit" value="fixed">THIS BUTTON</button>
  </p>
  <p>
    <button type="button" id="report">reportValidity()</button>
  </p>
</form>

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

CSS

Wir fügen etwas CSS hinzu, einschließlich :valid und :invalid Styles für unseren Button:

css
input[type="submit"],
button {
  background-color: #33a;
  border: none;
  font-size: 1.3rem;
  padding: 5px 10px;
  color: white;
}
button:invalid {
  background-color: #a33;
}
button:valid {
  background-color: #3a3;
}

JavaScript

Wir fügen eine Funktion hinzu, um den Wert, den Inhalt und die Validierungsnachricht des Beispiel-Buttons zu toggeln:

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", (e) => {
  e.preventDefault();
  if (exampleButton.value == "error") {
    breakOrFixButton("fixed");
  } else {
    breakOrFixButton("error");
  }
  output.innerHTML = `validation message: ${exampleButton.validationMessage} <br/> custom error: ${exampleButton.validationMessage}`;
});

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

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

Ergebnisse

Der Button ist standardmäßig gültig. Aktivieren Sie "THIS BUTTON", um den Wert, den Inhalt zu ändern und eine eigene Fehlermeldung hinzuzufügen. Durch Aktivieren der "reportValidity()"-Schaltfläche wird die Gültigkeit des Buttons überprüft, die eigene Fehlermeldung dem Benutzer gemeldet und ein invalid-Ereignis ausgelöst, wenn der Button aufgrund der Nachricht die Gültigkeitsprüfung nicht besteht.

Spezifikationen

Specification
HTML
# dom-cva-reportvalidity-dev

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
reportValidity

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch