/ / Fehler anzeigen, wenn in der Checkbox-Gruppe kein Kontrollkästchen aktiviert ist - zurb-foundation, zurb-foundation-5

Fehler anzeigen, wenn in der Checkbox-Gruppe kein Kontrollkästchen aktiviert ist - zurb-foundation, zurb-foundation-5

Wie zeige ich eine Fehlermeldung mit der HTML5 Formularvalidierungsbibliothek von Foundation 5 an, wenn in derselben Checkbox-Gruppe keine Kontrollkästchen aktiviert sind?

Antworten:

10 für die Antwort № 1

Sie müssen Ihren eigenen gültigen Validator schreiben, aber es ist ziemlich einfach.

Arbeitsbeispiel: CodePen-Verknüpfung

JavaScript

$(document).foundation({
abide: {
validators: {
checkbox_limit: function(el, required, parent) {
var group = parent.closest(".checkbox-group");
var min = group.attr("data-abide-validator-min");
var checked = group.find(":checked").length;
if (checked >= min) {
group.find("small.error").hide();
return true;
} else {
group.find("small.error").css({
display: "block"
});
return false;
}
}
}
}
});

HTML

<form data-abide>
<div class="row">
<div class="small-12 column">
<h4>Select your favourite vehicles</h4>
</div>
</div>
<div class="row">
<div class="small-12 columns checkbox-group" data-abide-validator-min="1">
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="car" />
car
</label>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="train" />
train
</label>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="bicycle" />
bicycle
</label>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="ferry" />
ferry
</label>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="plane" />
plane
</label>
<small class="error">You have to check at least one vehicle.</small>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<button type="submit">Submit</button>
</div>
</div>
</form>