Problembeschreibung

Formular verhalten sich in Browsern i.d.R. so, dass beim Drücken von Enter das Formular abgesendet wird. Das kann mitunter aber nachteilig sein, z.B. dann wenn der Nutzer notwendige Eingaben noch nicht vollständig ausgefüllt hat.

Oder ein anderer denkbarer Fall: In einem Warenkorb-Shop, soll wird mit Verpackungseinheite gearbeitet. Ein Script soll dabei prüfen, ob bei der Eingabe von Wunschstückzahlen diese Verpackungseinheiten eingehalten sind, also dafür sorgen, dass die Menge immer ein Vielfaches der Verpackungseinheit ist. Dazu gibt der Nutzer also die Menge in eine input-Feld ein. Beim Verlassen des Feldes, oder eben auch beim Klicken auf den Warenkorb-Button, erfolgt die Prüfung und ggf. Korrektur der Wunschmenge. Jedoch wird diese an den Warenkorb gebundene Prüfung umgangen wenn nach Eingabe im Feld durch den Nutzer einfach Enter gedrückt wird. Das Formular wird dann üblicherweise abgesendet.

Aufgabenstellung

Unser Ziel besteht nun also darin, das Absenden zu verhindern, wenn Enter gedrückt wird und die Werte nicht unsere Validierungskriterien entspricht. Ein onBlur-Ereignis führt die Wertprüfung im Eingabefeld durch, im Bsp. ist das die Funktion showSelAmountBox(), welche mit einem kleinen Dialog dem Nutzer mgl. Wunschmenge vorschlägt und dann korrekt ins Input-Feld überträgt. Das Absenden erfolgt wie üblich über ein Warenkorb-Icon als input-Tag vom Typ submit (<input type="submit" />).

Die Lösung im Detail

Wir kreieren eine JavaScript Funktion dontSubmit() welche wir mit dem Event onkeypress an unser Mengen-Eingabefeld binden <input type="text" onblur="showSelAmountBox(this);return false;" onkeypress="return dontSubmit(event, this);" />.

Was unsere dontSubmit()-Funktion macht ist im folgenden Quelltext kommentiert. Im Fall von Enter (13) löschen wir zunächst mal das onblur-Ereignis für das Eingabefeld, denn die nachfolgende Meldung per alert() führt zum Verlassen des input-Feldes und würde dann sofort erstmal die Funktion showSelAmountBox() über das onblur-Ereignis starten. Das wollen wir aber erst nach unserer Meldung zulassen.

function dontSubmit (e, my) {
	if ( e.keyCode==13 ) { // Enter abfragen
		my.onblur = null; // Blur-Ereign. f. Input-Feld vor alert löschen
		alert ('Bitte klicken Sie auf das Warenkorb-Symbol.'); // denn alert() erzeugt gleichzeitig ein onblur-Ereignis f. das Input-Feld
		showSelAmountBox ( my ); // Validierungs- und Dialogbox f. Mengenkorr.
		return false; // in diesem Fall nichts machen
	} else {
		return true;
	}
}

function showSelAmountBox ( my ) {
  // das ist unsere Fkt. zur Validierung der Mengeneingabe
}

Die Funktion showSelAmountBox() ist hier nur beispielhaft aufgeführt. Natürlich kann jegliche Validierung / Meldung stattfinden.