DiereportValidity()-Methode desHTMLInputElement-Interfaces führt die gleichen Validierungsüberprüfungsschritte durch wie diecheckValidity()-Methode. Zusätzlich zeigt der Browser dem Benutzer das Problem an, wenn dasinvalid-Ereignis nicht abgebrochen wird.

Syntax

reportValidity()

Parameter

Keine.

Rückgabewert

Gibttrue zurück, wenn der Wert des Elements keine Validitätsprobleme aufweist; andernfalls wirdfalse zurückgegeben.

Beispiele

Grundlegende Verwendung

HTML

Wir fügen ein Formular ein, das ein erforderliches Zahlenfeld und zwei Schaltflächen enthält: eine zum Überprüfen des Formulars und eine andere zum Absenden des Formulars.

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

JavaScript

Wenn die "reportValidity()"-Schaltfläche aktiviert wird, verwenden wir diereportValidity()-Methode, um zu überprüfen, ob der Wert des Eingabeelements seinen Einschränkungen entspricht. Wir loggen den Rückgabewert. Wennfalse, zeigen wir auch die Validierungsnachricht an und erfassen dasinvalid-Ereignis.

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

Wennfalse, erscheint eine Fehlermeldung, ein ungültiges Ereignis wird ausgelöst, und wir protokollieren dieses ungültige Ereignis in der 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 einenfalse-Rückgabewert hervorrufen kann, wenn der Wert ansonsten gültig ist.

HTML

Wir fügen dem HTML aus dem vorherigen Beispiel eine "Fix me"-Schaltfläche hinzu.

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

JavaScript

Wir erweitern das JavaScript aus dem grundlegenden Beispiel, indem wir eine Funktion hinzufügen, die dieHTMLInputElement.setCustomValidity()-Methode verwendet, um benutzerdefinierte Fehlermeldungen bereitzustellen. DievalidateAge()-Funktion setzt die Fehlermeldung nur dann auf eine leere Zeichenfolge, wenn die Eingabe gültig ist UND dieenableValidation-Variabletrue ist, wobeienableValidationfalse ist, bis die "fix issues"-Schaltfläche aktiviert wurde.

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}"`;  }});function validateAge() {  const validityState = ageInput.validity;  if (validityState.valueMissing) {    ageInput.setCustomValidity("Please set an age (required)");  } else if (validityState.rangeUnderflow) {    ageInput.setCustomValidity("Your value is too low");  } else if (validityState.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 "reportValidity()"-Schaltfläche vor der Eingabe eines Alters aktivieren, gibt diereportValidity()-Methodefalse zurück, weil sie dierequired-Einschränkung nicht erfüllt. Diese Methode löst eininvalid-Ereignis auf dem Eingabefeld aus und meldet dem Benutzer das Problem, indem die benutzerdefinierte Fehlermeldung "Please set an age (required)" angezeigt wird. Solange eine benutzerdefinierte Fehlermeldung festgelegt ist, wird durch Aktivieren der "reportValidity()"-Schaltfläche weiterhin ein Fehler angezeigt, selbst wenn Sie ein gültiges Alter auswählen. Um die Validierung zu aktivieren, müssen wir die benutzerdefinierte Fehlermeldung auf die leere Zeichenfolge setzen, was durch Klicken auf die "Fix issues"-Schaltfläche erfolgt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• HTMLInputElement.checkValidity()
• <input>
• <form>
• Learn: Client-side form validation
• Leitfaden: Constraint validation
• CSS:valid und:invalid Pseudoklassen