javascript - Foundation 4.3.2 Abide 不验证复选框

Question

Zurb Foundation 4.3.2 Abide 验证不验证复选框。

虽然编写我自己的自定义验证相对容易，但如果我可以更新库来验证就更好了，这样我工作的这个庞大机构的其他用户/开发人员也可以使用这些工具，而无需不得不去挖掘自定义脚本。

如何更新 Abide 以使复选框验证正常工作，而不必更新到 Foundation 5？—这个网站属于一个庞大的组织，升级需要数月、人力和大量预算，而我们没有这些。

示例代码:

<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

当然，起草这个问题让我开始思考一些解决方案，我想出了一个可行的方案。

首先，I integrated in a fix for Abide 4.3.2 that fixed the incorrect validation of hidden required fields.

接下来，我添加了一些逻辑来支持复选框。

最后，我复制了 radio 验证，做了一些细微的改动，瞧!复选框验证。

这是来自上面 GIT 链接的函数，已修改为包含复选框。注意添加 is_checkbox... 和 } 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;
},

然后在下面，我复制了 valid_radio : function (el, required) 并将其重新用于复选框:

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;
} 

砰。使用 Zurb Foundation Abide 4.2.3 验证复选框