Validierung
Die Validierung von Eingabefeldern erfolgt clientseitig allein browserbasiert. Das heißt, dass kein JavaScript eingesetzt wird, um die Eingaben des Nutzers zu prüfen. Anhand von HTML5-Attributen wie required oder disabled sowie des spezifischen type-Wertes führen moderne Browser eine Validierung selbst durch und verhindern gewisse falsche Eingaben eigenständig. Darüberhinaus kann aber eine zusätzliche Validierung mittels JavaScript eingebaut werden. Diese ersetzt jedoch nicht die individuelle serverseitige, für den Besucher unumgängliche obligatorische Überprüfung der Eingaben.
Hervorhebung von Eingabefeldern
Für die Hervorhebung von Eingabefeldern zur Anzeige einer fehlgeschlagenen oder erfolgreichen Validierung sind lediglich CSS-Klassen an den übergeordneten Elementen zu setzen. Das sonstige Markup bleibt bestehen.
Die Hervorhebung kann dabei individuell je Eingabefeld oder übergreifend je Gruppe erfolgen. Für ersteres ist die gewünschte CSS-Klasse am direkten Elternelement des Labels zu setzen. Für letzteres muss sie am übergeordneten Element mit der CSS-Klasse form-group gesetzt werden.
<div class="form-group has-success">
<strong class="control-label">Checkboxen mit gleichem Status</strong>
<div class="form-group-content">
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox-1-1" value="1">
<span>Checkbox #1 mit Erfolg</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox-1-2" value="2">
<span>Checkbox #2 mit Erfolg</span>
</label>
</div>
</div>
</div>
<div class="form-group">
<strong class="control-label">Checkboxen mit individuellem Status</strong>
<div class="form-group-content">
<div class="checkbox has-error">
<label>
<input type="checkbox" name="checkbox-2-1" value="1">
<span>Checkbox #3 mit Fehler</span>
</label>
</div>
<div class="checkbox has-success">
<label>
<input type="checkbox" name="checkbox-2-2" value="2">
<span>Checkbox #4 mit Erfolg</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="checkbox-2-3" value="3">
<span>Checkbox #5 ohne Status</span>
</label>
</div>
</div>
</div>
Mögliche Statushervorhebungen
| Status | CSS-Klasse |
|---|---|
| Erfolg | has-success |
| Warnung | has-warning |
| Fehler | has-error |
Barrierefreiheit
Bei fehlerhaften Eingaben müssen die entsprechenden Felder farblich hervorgehoben und ergänzend dazu eine Fehlerbeschreibung angezeigt werden. Sind diese Meldungen nicht Teil des Labels, müssen sie durch die Attribute aria-labelledby oder aria-describedby damit verknüpft werden.
