基础4.3.2 Abide不验证复选框 [英] Foundation 4.3.2 Abide Doesn't Validate Checkboxes

问题描述

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

虽然编写自己的自定义验证会比较容易，我可以更新库来验证，以便这个大型机构的其他用户/开发人员也可以使用的工具，而不必去挖自定义脚本。

如何更新Abide使复选框验证工作，而不必更新到Foundation 5？ - 这个网站属于一个庞大的组织，升级需要几个月，人力和很多预算，我们没有。 p>

以下是示例代码：

 < form id =form-name data-abide =ajax> 
< label for =print-checkbox>< input id =print-checkboxtype =checkboxrequired name =print-checkbox> < strong> Blah Blah Blah标签文字< / strong> 
< small class =error>< span class =icon-exclamation-sign>< / span>只有在表单未验证时才会显示的警告。< / small> 
< / label> 
< input id =print-submittype =submitvalue =Submitclass =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> 
  

解决方案

当然，草拟这个问题让我开始思考一些解决方案，我想出一个工作原理。

首先，我集成了Abide 4.3.2的修复程序，修复了隐藏的必填字段的错误验证。

一些逻辑支持复选框。

最后，我复制了无线电验证，做了一些小的改动，瞧！复选框验证。

以下是来自上述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 b $ b valid_length =（必需）？ （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）; 
} 
} 
} 
} 
 
返回验证; 
}，
  

然后下面我复制了 valid_radio：函数（el，必需）并重新使用它的复选框：

  valid_radio：function必需）{
 var name = el.getAttribute（'name'），
 group = document.getElementsByName（name），
 count = group.length，
 valid = 
 
 for（var i = 0; i  if（group [i] .checked）valid = true; 
} 
 
 for（var i = 0; 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 ），
 count = group.length，
 valid = false; 
 for（var i = 0; i  if（group [i] .checked）valid = true; 
} 
 
 for（var i = 0; i  if（valid）{
 $（group [i]）。removeAttr （'data-invalid'）。parent（）。removeClass（'error'）; 
} else {
 $（group [i]）attr（'data-invalid'，''）.parent（）。addClass（'error'）; 
} 
} 
 
 return valid; 
} 
  

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

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>

解决方案

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

这篇关于基础4.3.2 Abide不验证复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！