ElementInternals: setValidity() Methode

Baseline 2023

Newly available

Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die setValidity()-Methode des ElementInternals-Interfaces setzt die Gültigkeit des Elements.

Syntax

js
setValidity(flags)
setValidity(flags, message)
setValidity(flags, message, anchor)

Parameter

flags Optional

Ein Wörterbuchobjekt, das ein oder mehrere Flags enthält, die den Gültigkeitszustand des Elements anzeigen:

valueMissing

Ein boolescher Wert, der true ist, wenn das Element ein required-Attribut hat, aber keinen Wert, oder false sonst. Wenn true, entspricht das Element der :invalid CSS-Pseudoklasse.

typeMismatch

Ein boolescher Wert, der true ist, wenn der Wert nicht im erforderlichen Format vorliegt (wenn type email oder url ist), oder false, wenn das Format korrekt ist. Wenn true, entspricht das Element der :invalid CSS-Pseudoklasse.

patternMismatch

Ein boolescher Wert, der true ist, wenn der Wert nicht dem angegebenen pattern entspricht, und false, wenn er übereinstimmt. Wenn true, entspricht das Element der :invalid CSS-Pseudoklasse.

tooLong

Ein boolescher Wert, der true ist, wenn der Wert die angegebene maxlength für HTMLInputElement oder HTMLTextAreaElement-Objekte überschreitet, oder false, wenn seine Länge kleiner oder gleich der maximalen Länge ist. Wenn true, entspricht das Element den CSS-Pseudoklassen :invalid und :out-of-range.

tooShort

Ein boolescher Wert, der true ist, wenn der Wert die angegebene minlength für HTMLInputElement oder HTMLTextAreaElement-Objekte nicht erfüllt, oder false, wenn seine Länge größer oder gleich der minimalen Länge ist. Wenn true, entspricht das Element den CSS-Pseudoklassen :invalid und :out-of-range.

rangeUnderflow

Ein boolescher Wert, der true ist, wenn der Wert kleiner als das durch das min-Attribut angegebene Minimum ist, oder false, wenn er größer oder gleich dem Minimum ist. Wenn true, entspricht das Element den CSS-Pseudoklassen :invalid und :out-of-range.

rangeOverflow

Ein boolescher Wert, der true ist, wenn der Wert größer als das durch das max-Attribut angegebene Maximum ist, oder false, wenn er kleiner oder gleich dem Maximum ist. Wenn true, entspricht das Element den CSS-Pseudoklassen :invalid und :out-of-range.

stepMismatch

Ein boolescher Wert, der true ist, wenn der Wert nicht den durch das step-Attribut festgelegten Regeln entspricht (das heißt, er ist nicht gleichmäßig durch den Schrittwert teilbar), oder false, wenn er die Schrittregel erfüllt. Wenn true, entspricht das Element den CSS-Pseudoklassen :invalid und :out-of-range.

badInput

Ein boolescher Wert, der true ist, wenn der Benutzer eine Eingabe gemacht hat, die der Browser nicht umwandeln kann.

customError

Ein boolescher Wert, der angibt, ob die benutzerdefinierte Gültigkeitsnachricht des Elements durch Aufrufen der Methode setCustomValidity() auf einen nicht-leeren String gesetzt wurde.

Hinweis: Um alle Flags auf false zu setzen, was anzeigt, dass dieses Element alle Einschränkungen der Validierung besteht, übergeben Sie ein leeres Objekt {}. In diesem Fall müssen Sie keine message übergeben.

message Optional

Ein String, der eine Nachricht enthält, die gesetzt wird, wenn eines der flags true ist. Dieser Parameter ist nur optional, wenn alle flags false sind.

anchor Optional

Ein HTMLElement, das vom Nutzeragenten verwendet werden kann, um Probleme mit dieser Formularübermittlung zu melden.

Rückgabewert

Keiner (undefined).

Ausnahmen

NotSupportedError DOMException

Wird ausgelöst, wenn das Element seine formAssociated-Eigenschaft nicht auf true gesetzt hat.

TypeError

Wird ausgelöst, wenn eines oder mehrere flags true sind.

NotFoundError DOMException

Wird ausgelöst, wenn anchor angegeben ist, aber der Anker kein inklusiver Schatten-Nachfahre des Elements ist.

Beispiele

Im folgenden Beispiel wird setValidity mit einem leeren flags-Parameter aufgerufen, um anzuzeigen, dass das Element die Validierungsregeln für Einschränkungen erfüllt.

js
this.internals_.setValidity({});

Im folgenden Beispiel wird setValidity mit dem Flag valueMissing auf true gesetzt aufgerufen. Ein message-Parameter muss dann ebenfalls übergeben werden, der eine Nachricht enthält.

js
this.internals_.setValidity({ valueMissing: true }, "my message");

Spezifikationen

Specification
HTML Standard
# dom-elementinternals-setvalidity

Browser-Kompatibilität

BCD tables only load in the browser