studyklar
IProg · Skript 3 · Abschnitt 2

Formular mit JavaScript prüfen: submit(), onsubmit und Entkopplung

Ein Formular mit zwei Feldern soll erst abgeschickt werden, wenn beide ausgefüllt sind. Das Skript zeigt drei Fassungen, jede besser als die vorige. Rechts steht der Code der Fassung, um die es gerade geht. Mit Weiter geht es Schritt für Schritt voran. Ein Klick auf einen Schritt springt direkt dorthin.

Worum es geht

Skript 03, Folien 4 bis 7: JavaScript und Formulare.

Ein Formular sammelt Eingaben und schickt sie an den Server. Fehlt eine Eingabe, soll das sofort auffallen, noch im Browser. Die Frage: Wie hängt man eine solche Prüfung an ein Formular, und welche Art ist die beste?

So gehen wir vor:

  1. Warum man vor dem Absenden prüft, und die zwei Varianten der Folie.
  2. Variante 1: ein Knopf, der das Formular per Script absendet (Folie 5).
  3. Variante 2: onsubmit blockiert das Absenden (Folie 6).
  4. Die komplette Entkopplung von HTML und JavaScript (Folie 7).
  5. Eine Klausurfrage zum Thema.

Achtung: Auf Folie 5 steht ein Fehler im Code. Schritt 4 zeigt ihn und korrigiert ihn.

Prüfen vor dem Absenden

Skript · Anwendung: JavaScript und Formulare

Bei Formularen wünschenswert: Validierung der Eingaben vor Abschicken des Formulars

Ohne Prüfung geht jedes Formular an den Server, auch halb leer. Der Server merkt den Fehler und schickt eine neue Seite zurück. Das dauert, und der Nutzer muss suchen, was fehlt.

Prüft JavaScript schon im Browser, kommt die Meldung sofort. Die Folie nennt das Validierung: die Eingaben auf Gültigkeit prüfen.

Ergänzung, nicht auf der Folie: Der Server muss trotzdem selbst prüfen. JavaScript kann ausgeschaltet sein, und wer will, schickt Daten auch an der Prüfung vorbei. Die Prüfung im Browser ist Komfort, kein Schutz.

Variante 1 und Variante 2

Skript · Zusammenspiel von JavaScript und <form>
  • Variante 1: Absenden eines Formulars mit der JavaScript-Funktion submit(), verwendbar z. B. in Kombination mit <input type="button"> und onclick
  • Variante 2: Blockieren des Absendens mit Funktion: onsubmit=f(). Das Formular wird nur abgesandt, wenn f() den Wert true zurückliefert. Verwendbar z. B. in Kombination mit <input type="submit">

Variante 1: Ein Knopf vom Typ button schickt von sich aus nichts ab. Ein Klick ruft über onclick eine Prüffunktion auf. Ist alles gut, schickt sie das Formular mit submit() selbst ab.

Variante 2: Ein Knopf vom Typ submit schickt das Formular ab; das macht der Browser. Vorher läuft aber, was in onsubmit am Formular steht. Liefert die Funktion dort false, hält der Browser das Formular zurück. Nur bei true geht es ab.

Noch 12 Schritte bis zum Ergebnis
Den ganzen Lösungsweg sehen Studierende und Lehrende der HS KL. Registriere dich mit deiner Adresse @stud.hs-kl.de oder @hs-kl.de, dann geht es hier direkt weiter.
Registrieren

Abbildung 1Zwei Wege

prüfen vor dem Absenden

Was passiert
1Der Nutzer füllt t1 und t2 aus und klickt „ok“.
2JavaScript prüft im Browser: Ist ein Feld leer?
3Nur wenn alles gefüllt ist, geht das Formular an den Server.
LegendeZeilen des SchrittsDer Ablauf: erst im Browser prüfen, dann absenden.