JavaScript/DOM/Event/invalid

Der invalid-Event-Handler Der Eventhandler invalid wird ausgelöst, wenn ein Eingabefeld mit required als Pflichtfeld keine Eingabe erhalten hat oder einen nicht gültigen Wert erhalten hat.

bubbles	nein
cancelable	ja
mögliche Auslöser	input
Event-Objekt	Event

Beispiel ansehen …

<form name="Formular" method="post">
    <label for="Benutzer">Benutzername*:</label> <input required oninvalid="invalid(this)" name="Benutzer" id="Benutzer"><br/>
    <label for="email">E-Mail-Adresse:</label> <input type="email" oninvalid="invalid(this)"  name="E-Mail-Adresse" id="email"><br/>
    <label for="age">Alter**:</label> <input required type="number" max="150" min="13" step="1" oninvalid="invalid(this)" name="Alter" id="age"> Jahre<br/>
    <button type="submit"  onmousedown="clearMissing()">Absenden</button>
</form>
<p id="missing"></p>
<p>* Die gekennzeichneten Felder müssen ausgefüllt werden.<br>** Unser Service setzt ein Mindestalter von 13 Jahren voraus.</p>

<script>
  var elem = document.getElementById('missing');

  function invalid(elm) {
    if (elem.innerHTML == '') {
      elem.innerHTML = 'Folgende Angaben sind fehlerhaft: '+elm.name;
    } else {
      elem.innerHTML += ', ' + elm.name;
    }
  }
	
  function clearMissing() {
    elem.innerHTML = ''; 
  }
</script>

Im Beispiel wird ein Formular definiert, das drei Eingabefelder enthält. Wird kein Username angegeben, wird invalid aufgerufen - genauso, wenn im E-Mail-Feld etwas anderes als eine Mailadresse steht. Das Alter-Feld hat eine Beschränkung zwischen 13 und 150 Jahren, andere Werte sollten als invalid gemeldet werden.

Beachten Sie: Die Validierung des Inhalts von input-Elementen kann unerwartet ausfallen.

In vielen älteren Browsern wird z.B input type="number" nicht ordentlich validiert. Auch die Attribute min und step werden je nach Browserversion nicht validiert.

Eine Validierung auf Client-Ebene stellt ein Feature zugunsten der Bedienbarkeit dar - insbesondere darf sich der Server, der die Daten empfängt, nicht darauf verlassen, dass die Clientvalidierung funktioniert hat. Ältere Browser oder exotische Attribute können auch mal zum Ignorieren einzelner Validierregeln führen.

Browser, die eine Validierung überhaupt ermöglichen, reagieren oft schon selbst angemessen auf Fehleingaben, so sie sie denn erkennen. Deshalb scheint invalid also nur für Spezialanwendungen wirklich sinnvoll, die üblichen "Hier fehlt was" oder "Geben Sie eine ganze Zahl ein" - Meldungen übernimmt der Browser schon ohne eigenes Zutun auf JavaScript-Ebene.