JavaScript/DOM/Event/invalid

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Event-Handler HTML5 invalid
Bedeutung 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.[1]
bubbles nein
cancelable ja
Elternelemente Darf vorkommen in: input
Event-Objekt Event
Browsersupport
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel

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.

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>
Beachten Sie

Die Validierung des Inhalts von input-Elementen kann unerwartet ausfallen.[2]

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.[3]

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.

Tipp
Quellen
  1. MDN: invalid
  2. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML#Constraint_Validation
  3. http://stackoverflow.com/questions/25165730/trigger-oninvalid-event-on-input-field
siehe auch

{{{siehe_auch}}}

Weblinks

{{{Weblinks}}}

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML