Foundation 4.3.2 Abide Doesn't Validate Checkboxes
Zurb Foundation 4.3.2 Abide validation doesn't validate checkboxes. Though it would be relatively easy to write my own custom validation, it would be even better if I could update
Solution 1:
And of course drafting this question had me start thinking about some solutions, and I figured one out that works.
First off, I integrated in a fix for Abide 4.3.2 that fixed the incorrect validation of hidden required fields.
Next, I added in some logic to support checkboxes.
Finally, I duplicated the radio validation, made a couple slight changes, and voila! Checkbox validation.
Here's the function from the GIT link above, modified to include checkboxes. Note the addition of is_checkbox...
and } else if (is_checkbox && required) {
:
check_validation_and_apply_styles : function (el_patterns) {
var count = el_patterns.length,
validations = [];
for (var i = count - 1; i >= 0; i--) {
var el = el_patterns[i][0],
required = el_patterns[i][2],
value = el.value,
is_radio = el.type === "radio",
is_checkbox = el.type === "checkbox",
valid_length = (required) ? (el.value.length > 0) : true,
isVisible = $(el).is(":visible");
if (isVisible) {
if (is_radio && required) {
validations.push(this.valid_radio(el, required));
} elseif (is_checkbox && required) {
validations.push(this.valid_checkbox(el, required));
} else {
if (el_patterns[i][1].test(value) && valid_length ||
!required && el.value.length < 1) {
$(el).removeAttr('data-invalid').parent().removeClass('error');
validations.push(true);
} else {
$(el).attr('data-invalid', '').parent().addClass('error');
validations.push(false);
}
}
}
}
return validations;
},
And then below, I duplicated the valid_radio : function (el, required)
and repurposed it for the checkboxes:
valid_radio : function (el, required) {
var name = el.getAttribute('name'),
group = document.getElementsByName(name),
count = group.length,
valid = false;
for (var i=0; i < count; i++) {
if (group[i].checked) valid = true;
}
for (var i=0; i < count; i++) {
if (valid) {
$(group[i]).removeAttr('data-invalid').parent().removeClass('error');
} else {
$(group[i]).attr('data-invalid', '').parent().addClass('error');
}
}
return valid;
},
valid_checkbox : function (el, required) {
var name = el.getAttribute('name'),
group = document.getElementsByName(name),
count = group.length,
valid = false;
for (var i=0; i < count; i++) {
if (group[i].checked) valid = true;
}
for (var i=0; i < count; i++) {
if (valid) {
$(group[i]).removeAttr('data-invalid').parent().removeClass('error');
} else {
$(group[i]).attr('data-invalid', '').parent().addClass('error');
}
}
return valid;
}
Bam. Checkbox validation with Zurb Foundation Abide 4.2.3
Post a Comment for "Foundation 4.3.2 Abide Doesn't Validate Checkboxes"