Formulare vor dem Absenden prüfen
checkValidity prüft die Eingaben von Formularfeldern mit Bedingungen wie min, max oder pattern und liefert auch gleich die Fehlermeldung mit. Das erspart z.B. die Prüfung, ob die Eingabe innerhalb eines bestimmten Wertebereichs liegt und gleichzeitig, ob das Feld ausgefüllt wurde (weil required gesetzt ist).
<input type="number" class="somenum" required> <input type="number" class="rngenum" min="5" max="30" required > <button class="checkForm">OK</button>
checkform.addEventListener ("click", function () {
if (somenum.checkValidity() === false) {
errorSomenum.innerHTML = somenum.validationMessage;
}
if (!rngenum.checkValidity()) {
errorNum.innerHTML = rngenum.validationMessage;
}
});
Das ist weniger fehlerträchtig als die klassische Abfrage der Eingabewerte.
if (!(parseInt (num.value) > 4)) {
checkMsg.innerHTML = "Wert muss 5 oder größer als 5 sein";
}
if (!(parseInt (num.value) < 31)) {
checkMsg.innerHTML = "Wert muss kleiner oder gleich 30 sein";
}
Dennoch – die Wirkung von checkValidity reicht nur so weit, wie CSS valid / invalid mit dem jeweiligen type-Attribut. type=email validiert bereits, wenn ein @-Zeichen gesetzt ist, also z.B. mit mymail@sonstnix. Die Browser prüfen nicht, ob eine Landeskennung (z.B. .com oder .de) vorhanden ist.
- validity
- Boolean
if (document.querySelector(".item").validity.rangeOverflow) { text = "Value too large"; } - validationMessage
- Nachricht, die der Browser ausspielt, wenn validity false zurückgibt.
- willValidate
- Stellt fest, ob ein input-Element validiert werden kann.
checkValidation direkt mit blur
Übersichtlicher wird das Ausfüllen des Formulars, wenn der Benutzer Fehlermeldungen nicht erst beim Klick auf den Button OK oder Senden vorgesetzt bekommt, sondern direkt wenn das Feld nach der Eingabe den Fokus verliert.
fieldItem.addEventListener ("blur", function () {
if (!this.checkValidity()) {
errorItem.innerHTML = this.validationMessage;
}
});