Clientseitige Validierung von Checkboxen

[Gunnar Bittersmann]

@@mk

<form method = 'POST' action = 'irgendwas.php' Name = 'form01' onsubmit = 'return formularPruefen()'>

JavaScript-Code sollte nicht in HTML-Attributen stehen, also nicht on… verwenden, sondern fortgeschrittene Ereignisverarbeitung

BTW, die Leerzeichen um die Gleichheitszeichen machen den HTML-Code schlecht lesbar. Besser ohne, und Element- und Attributbezeichner in Kleinbuchstaben:

<form method="POST" action="irgendwas.php" name="form01">

Statt "form01" wäre eine sprechende Bezeichnung sinnvoll.

  <input type = 'checkbox' name = 'cb[]' id = 'cb1'> Kurs1

Deine Checkboxen haben keine Beschriftung. So haben sie eine (wobei der Wert des for-Attributs mit der ID des entsprechenden Eingabe-Elements übereinstimmen muss):

<input type="checkbox" name="cb[]" id="cb1"> <label for="cb1">Kurs1</label>

  <input type = 'checkbox' name = 'cb[]' id = 'cb2'> Kurs2

Was das soll, verschieden Checkboxen denselben Wert fürs name-Attribut zu verpassen, entzieht sich meiner Kenntnis. Wie willst du dann serverseitig auswerten, welche Checkboxen angehakt waren?

  <input type = 'submit' value = 'senden'>

Ein Button sollte kein input-Element sein, sondern ein button (aus Gründen):

<button type="submit">senden</button>

Jetzt soll der Nutzer exakt 2 Kurse auswählen (also nicht 0, 1 oder 3 Kurse). […] Dazu muss ich irgendwie die Checkboxen in ein Javascript-Array bekommen, dieses dann durchlaufen und für jedes Arrayelement die Eigenschaft "checked == true" prüfen. Jeweils hochzählen und schauen, ob exakt zwei Checkboxen ausgewählt wurden.

Nein. Du musst lediglich alle angehakten Checkboxen selektieren:

• querySelectorAll(':checked') liefert eine NodeList
• mit length schaust du, wieviele es sind.

Das tust du in einer Funktion (ich nenne sie mal "validate"), die als Eventhandler für das submit-Event des Formulars registriert wird:

document.forms.form01.addEventListener('submit', validate, false);

Die Funktion unterdrückt als erstes mit preventDefault() das Standardverhalten, d.h. das Abschicken des Formulars.

Dann erfolgt die Prüfung. Bei genau 2 angehakten Checkboxen wird das Formular abgeschickt, andernfalls wird eine Meldung ausgegeben. (Da fällt dir noch was besseres ein als per alert()!)

Da das Event vom Formular kommt, kann das Formular in der Funktion per this angesprochen werden:

function validate(e)
{
	e.preventDefault();

	if (this.querySelectorAll(':checked').length === 2)
	{
		this.submit(this);
	}
	else
	{
		alert("Nimm 2");
	}
}

LLAP