Clientseitige Validierung von Checkboxen

[1unitedpower]

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

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

Dann erfolgt die Prüfung.

Das ist die klassische Variante, bei diesem Ablauf gibt es allerdings einen Nachteil: Der Browser hat zu dem Zeitpunkt, an dem das submit-Ereignis eintritt, schon die Formular-Eingaben auf Gültigkeit überprüft und den Nutzer über eventuelle Fehler benachrichtigt. Also zum Beispiel über fehlende Pflichtfelder oder zu hohe oder zu niedrige Werte bei numerischen Eingabefeldern. Dem Nutzer wurde als vom Browser bereits einmal Gelegenheit gegeben, seine Eingaben zu korrigieren und die letzten Eingaben haben die Validierung des Browsers passiert. Nun kommen wir und führen nach dieser Phase nochmal eine eigene benutzerdefinierte Validierung durch. Das ist für die Nutzer eher unkomfortabel, insbesondere für jene, die auf Screenreader angewiesen sind. Angenehmer wäre es, wenn wir unsere benutzerdefinierte Validierung in der regulären Validierungs-Phase des Browsers unterbringen, dafür gibt es heute die Constraint-Validation-API. Das Vorgehen gestaltet sich außerdem einfacher als bei der klassischen Variante, weil wir nicht selber darauf achten müssen, ob das Formular nun abgesendet wird oder nicht, wir haben als kein Hantier mit .preventDefault() und .submit().

Statt beim Eintreten des submit-Ereignises nehmen wir unsere Validierung direkt bei Änderung an den Checkboxen vor. Wir müssen als auf das change- oder input-Ereignis lauschen:

var checkListe = document.querySelectorAll('[name=cb\[\]]');
var checkArray = Array.prototype.slice.call(checkListe);
checkArray.forEach(function(checkbox){
   checkbox.addEventListener('input', validate);
});

Die validate-Funktion sieht dann auch ein wenig anders aus:

function validate (event) {
  var checkbox = event.originalTarget;
  var markierteCheckboxen = document.querySelectorAll(':checked');
  checkbox.setCustomValidity('');
  checkbox.classList.remove('too-view-error');
  checkbox.classList.remove('too-many-error');
  if (!checkbox.checked && markierteCheckboxen.length < 2) {
     checkbox.setCustomValidity('Sie müssen noch eine weitere Option auswählen');
     checkbox.classList.add('too-view-error');
  } else if (checkbox.checked && markierteCheckboxen.length > 2) {
     checkbox.setCustomValidity('Sie haben zu viele Optionen gewählt');
     checkbox.classList.add('too-many-error');
}

Man sollte unbedingt noch für eine textliche Beschreibung des Fehlers sorgen, mit den Pseudoklassen :valid und :invalid und den Klassen .too-view-error und .too-many-error sollte das einfach möglich sein.