Foundation 4.3.2 Abide Doesn't Validate Checkboxes

Question

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 the library to validate, so that other users/developers at this massive institution I work at could also use the tools, without having to go digging for custom scripts.

How to update Abide to make checkbox validation work, without having to update to Foundation 5?—This website belongs to a massive organization, and upgrading will take months, manpower, and a lot of budget, none of which we have.

Here's example code:

<form id="form-name" data-abide="ajax">
    <label for="print-checkbox"><input id="print-checkbox" type="checkbox" required name="print-checkbox"> <strong>Blah Blah Blah Label Text</strong>
        <small class="error"><span class="icon-exclamation-sign"></span> A warning that only appears if the form doesn't validate.</small>
    </label>
    <input id="print-submit" type="submit" value="Submit" class="button small radius">
</form>

<script type="text/javascript">
$('#form-name').on('valid invalid submit', function (e) {
    e.stopPropagation();
    e.preventDefault();
    if(e.type === "valid") {
        alert("returns valid");
    }
    return false;
});
</script>

Answer 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));
        } else if (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