onsubmit / onreset • Formular absenden / zurücksetzen

onsubmit – beim Absenden

Auch wenn die input-Elemente mit Attributen wie required und Pseudoklassen wie valid / invalid viele Aufgaben übernehmen: Das clientseitige Prüfen vor dem Absenden von Benutzereingaben trägt zu einem barrierefreien Ausfüllen von Formularen mit weniger Abbrüchen bei.

Das submit-Event ist ausschließlich für das form-Element gedacht und wird in erster Linie bei der Validierung von Formularen eingesetzt. onsubmit feuert in dem Augenblick, in dem der Benutzer das Formular zur Bearbeitung abschickt.

Wenn Javascript nicht aktiviert ist, wird die vorgegebene Aktion des Formulars – die Übertragung der Daten an die Anwendung – ohne Prüfung ausgeführt.

Absenden der Formulareingaben verhindern

Das Script muss das Absenden explizit verhindern. Der klassische Mechanismus war return false, heute verhindert event.preventDefault() das Absenden des Formulars, wenn Eingaben nicht akzeptiert werden.

<form action="myForm.php" method="post" id="myForm">
   <input type="text" size="20" required />
   <input type="submit" value="Absenden" />
</form>
…
document.getElementById('myForm').onsubmit = function (evt) { 	
   let input = document.getElementById('name').value;
   if (input.length < 3) {
      msg.innerHTML = '»Name« bitte ausfüllen'
      evt.preventDefault();
   } 
}
 oder 

document.getElementById('myForm').addEventListener (
    "submit", 
    function (evt) {
    	// Eingaben nicht korrekt
    	evt.preventDefault();
    	//
});

Das Script prüft, ob eine Mindestzahl von Zeichen eingegeben wurden. Falls nicht, ruft das Script event.preventDefault auf, damit das Formular die Daten nicht an die Anwendung überträgt.

onsubmit und return false

return false stammt aus der Frühzeit von Javascript, funktioniert aber noch in allen Browsern. Alternativ kann die neuere Funktion event.preventDefault benutzt werden. Dafür muss das Event als Parameter übergeben werden.

window.addEventListener ('submit', function (evt) {
   …
   evt.preventDefault);
   …
})

(evt.preventDefault) ? eve.preventDefault() : eve.returnValue = false;

onreset

Der Browser feuert ein reset-Event, wenn der Benutzer das HTML-Formular durch den Reset-Button zurücksetzt oder durch den Aufruf von form.reset().

onreset feuert also nicht nur, wenn der Benutzer den Reset-Button drückt, sondern auch durch den Aufruf von form.reset()

Javascript onreset ist ebenfalls ausschließlich dem HTML form-Element vorbehalten, aber einen Reset-Button sehen wir heute nur noch selten in Formularen – zu schnell drückt ein Benutzer den Button aus Versehen und löscht damit alle Felder des Formulars. Aber durch das Abfangen des onreset-Events kann ein Script die Felder auswählen, die tatsächlich gelöscht werden.

…
}
<input type="reset" value="Alles löschen / Reset" />
<input type="submit" value="Absenden" name="Absenden" />
…
<script>
let form = document.getElementById('form');
form.onreset = function() {
   if (!window.confirm('Wollen Sie wirklich alle Eingaben löschen?')) 
   return false;
</script>

onreset wird für das form-Element gemeldet – nicht für den Reset-Button. Hier bekommt der Benutzer noch die Chance, das Reset und damit das Löschen aller Eingaben zu canceln.

let passwd = document.getElementById('passwd');
passwd.onchange = function() {
	if (passwd != thePasswd)
	form.reset();
}

onreset Attribute

target

Objekt zu dem das Ereignis ursprünglich gesendet wurde

eventPhase

Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE

bubbles

true, wenn das Ereignis nach oben steigen kann

cancelable

true, wenn die Aktion des Ereignis verhindert werden kann

timeStamp

Zeit in Millisekunden, zu der das Ereignis eingetreten ist