当然,起草这个问题让我开始思考一些解决方案,并且我找到了一个可行的解决方案。
首先,我集成了 Abide 4.3.2 的修复程序,修复了隐藏必填字段的错误验证。 https://github.com/zurb/foundation/issues/3576
接下来,我添加了一些逻辑来支持复选框。
最后,我复制了无线电验证,做了一些细微的更改,瞧!复选框验证。
这是上面 GIT 链接中的函数,经过修改以包含复选框。注意添加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;
},
然后在下面,我复制了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 进行复选框验证