checkValidity – Formulare validieren

Javascript validieren: Eingaben prüfen  vor dem Absenden

checkValidity vereinfacht die Validierung von Formularen, wenn die möglichen Eingabewerte durch Attribute des input-Elements beschränkt sind.

Zwar zeigen CSS-Selektoren für valid / invalid schnell, ob die Eingaben dem geforderten Bereich entsprechen, aber checkValidity steuert automatische Fehlermeldungen bei.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

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;
	} 
});