Clientseitige Validierung von Checkboxen

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Nein. Du musst lediglich alle angehakten Checkboxen selektieren:

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

Halt! Was Wichtiges fehlt noch: Nicht alle Browser unterstützen querySelectorAll() (alte IE < 8). Diese dürfen natürlich nicht daran gehindert werden, das Formular abzuschicken. (Dann findet keine clientseitige Validierung statt. Das ist OK; es gibt ja noch die serverseitige.)

Man darf also preventDefault() usw. nur dann ausführen, wenn der Browser querySelectorAll() versteht. Also abfragen, und die Eventbehandlung auch (feature detection):

function validate(e)
{
	if (this.querySelectorAll && this.submit && e && e.preventDefault)
	{
		e.preventDefault();

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

Damit in alten Browsern, die addEventListener() nicht kennen, kein Fehler geworfen wird, auch das vorher abfragen (und auch die Existenz des Elements):

if (document.forms.form01 && document.forms.form01.addEventListener)
{
	document.forms.form01.addEventListener('submit', validate, false);
}

Oder man geht den Cutting-the-mustard-Weg (change) und schließt alte Browser generell von der Ausführung des Scripts aus:

if ('classList' in document.createElement('div') && 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach)
{
	if (document.forms.form01)
	{
		document.forms.form01.addEventListener('submit', validate, false);
	}

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

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

LLAP