Workshop: Formularfeedback mit dezentem Javascript (Update)

In diesem Workshop soll es nicht darum gehen, Formulareingaben auf Plausibilität zu prüfen, sondern darum, ob erforderliche Eingaben überhaupt gemacht wurden, und wie man den Benutzer auf fehlende Eingaben hinweisen kann.

Das Szenario:

Ein Kommentarformular mit den Eingabefeldern Name, E-Mail-Adresse, Website und Kommentar. Bis auf Website müssen alle Felder ausgefüllt werden, sonst wird der Kommentar nicht abgeschickt. Aber wie macht man einem Benutzer klar, dass sein Kommentar nicht gepostet wurde, weil er vergessen hat, seinen Namen einzutragen, bevor er auf „Abschicken“ geklickt hat?

Es wäre natürlich ein leichtes, die Eingaben nach dem Abschicken mit PHP zu überprüfen – allerdings wird dabei das gesamt Submit-Script bis zum Ende durchlaufen, ohne dass man es abbrechen kann. Man muss den Benutzer also immer auf eine neue Seite umleiten, auf der er dann letztendlich auf die fehlende Eingabe hingewiesen werden kann.

Besser wäre es, man man könnte direkt nach dem Klick auf den Submit-Button, aber noch vor dem folgenden Programmablauf auf fehlende Eingaben prüfen. Mit PHP geht das nicht, aber mit Javascript.

Beispiel

Wie das aussehen kann, können Sie im Kommentarformular zu diesem Beitrag ausprobieren. Tragen Sie gar nichts ein, wird nach dem Klick auf den Abschicken-Button direkt darunter die Meldung angezeigt: „Bitte tragen Sie noch Ihren Namen, eine E-Mail-Adresse und einen Kommentar ein.“ Haben Sie nur Ihre E-Mail-Adresse vergessen, steht dort nach dem Abschicken: „Bitte tragen Sie noch eine E-Mail-Adresse ein.“ usw.

Und wie funktioniert das?

Das eigentliche Geheimnis liegt beim Submit-Button, der sieht im HTML-Code nämlich so aus:

<input type="submit" name="kommentarabschicken" value="Abschicken" onclick="return kommentar_eingabe_check();">

Das onclick-Argument bedeutet nichts anderes, als dass nach dem Klick eine Javascript-Funktion aufgerufen wird. Nur wenn diese den Wert true zurückgibt, wird das Submit-Script abgearbeitet, bei false wird es abgebrochen.

In der Javascript-Funktion return kommentareingabecheck() wird geprüft, ob alle erforderlichen Felder ausgefüllt wurden. Wenn nein, wird per innerHTML ein entsprechender Fehlertext in ein leeres div (in diesem Fall mit der ID „fehler“)geschrieben, was im Browser sofort angezeigt wird, und der Wert false zurückgegeben. Das Submit-Script wird daraufhin abgebrochen und der Benutzer kann die fehlenden Eingaben nachtragen.

Die Javascript-Funktion:

function kommentar_eingabe_check() {
	ok=true;
	meldung='';
	if (document.getElementById('name').value.length < 1) {
		meldung = 'Ihren Namen';
		ok=false;
	}
	if (document.getElementById('eMail').value.length < 1) {
		if (!meldung=='' && document.getElementById('msg').value.length < 1) {
			meldung += ', eine E-Mail-Adresse';
		} else if (!meldung=='' && document.getElementById('msg').value.length > 0) {
			meldung += ' und eine E-Mail-Adresse';
		} else {
			meldung = 'eine E-Mail-Adresse';
		}
		ok=false;
	}
	if (document.getElementById('msg').value.length < 1) {
		if (!meldung=='') {
			meldung += ' und einen Kommentar';
		} else {
			meldung = 'einen Kommentar';
		}
		ok=false;
	}
	if (ok==false) {
		document.getElementById('fehler').innerHTML = '<p class="fehler">Bitte tragen Sie noch ' + meldung + ' ein.
';
	}
	return ok;
}

Nachteile

Hat ein Benutzer Javascript in seinem Browser deaktiviert, funktionert diese Methode nicht. Allerdings bin ich der Meinung, dass man im nun schon einigermaßen fortgeschrittenen 21. Jahrhundert auf Javascript-Ausschalter keine Rücksicht mehr nehmen muss.

Update

Auf diverse Anregungen hin (danke an Martin für den trim()-Vorschlag) habe ich das Script so modifiziert, dass Leerzeichen nicht mehr als gültige Eingabe zugelassen werden. Das geänderte Script finden Sie in den Kommentaren.