Foundation 5 & Abide：一组复选框的自定义验证器？答案

【问题标题】：Foundation 5 & Abide: a custom validator for a set of checkboxes?Foundation 5 & Abide：一组复选框的自定义验证器？
【发布时间】：2014-08-21 06:26:19
【问题描述】：

我想为一组复选框创建一个验证器。

让我们考虑一组 5 个复选框。要求用户检查最多 3 个，至少 1 个。

所以，这是我正在进行的代码：

<div data-abide-validator='checkboxes' data-abide-validator-values='1,3'>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
    <input type="checkbox"/>
</div>

<script>
    $(document).foundation({
        validators: {
            checkboxes: function(el, required, parent) {
                var countC = el.find(':checked').length;
                alert(countC);
            }
        }
    });
</script>

此时，我只是尝试计算检查的输入。但似乎我什至无法触发验证器......我想我可以设法编写我的验证内容，只要我能弄清楚如何触发它。

确实我没有找到很多自定义验证器的例子，官方文档对我帮助不大。

【问题讨论】：

标签： forms validation checkbox zurb-foundation abide

【解决方案1】：

您的 HTML 标记对于 abide 来说并不是真正“正确”的。您应该将 data-abide-validator 属性附加到输入，而不是父 div。此外，您需要一些更好的标记，以便 abide 的默认错误显示可以正常工作（以及更好地使用 Foundation 的网格系统进行布局）。我会向您指出 Zurb 网站上的 Abide Validation Page 以获取表单标记的一些示例。

我冒昧地重组了您的标记，使其更像是基础布局：

<form action="/echo/html/" method="POST" data-abide>
    <div class="row">
        <div class="small-12 columns checkbox-group" data-abide-validator-limit="1,3">
            <label>Check some boxes</label>
            <small class="error">You have checked an invalid number of boxes.</small>
            <ul class="small-block-grid-3">
                <li>
                    <label>
                        <input type="checkbox" data-abide-validator="checkbox_limit" value="1" /> 1
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" data-abide-validator="checkbox_limit" value="2" /> 2
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" data-abide-validator="checkbox_limit" value="3" /> 3
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" data-abide-validator="checkbox_limit" value="4" /> 4
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" data-abide-validator="checkbox_limit" value="5" /> 5
                    </label>
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="small-12 columns">
            <button type="submit">Submit</button>
        </div>
    </div>
</form>

至于你的 JS 代码。这也不正确。您需要解决选项的 abide -> validators 命名空间，而不仅仅是验证器。我已经重写了您的 JS 代码，不仅可以做到这一点，还可以提供您想要的效果：

$(document).foundation({
    abide: {
        validators: {
            checkbox_limit: function(el, required, parent) {
                var group = parent.closest( '.checkbox-group' );
                var limit = group.attr('data-abide-validator-limit').split(',');
                var countC = group.find(':checked').length;
                if( countC >= limit[0] && countC <= limit[1] ) {
                    group.find('small.error').hide();
                    //return true so abide can clear any invalid flags on this element
                    return true;
                } else {
                    group.find('small.error').css({display:'block'});
                    //return false and let abide do its thing to make sure the form doesn't submit
                    return false;
                }
            }
        }
    }
});

为了在进行自定义验证时检查相邻元素，您需要有一些目标。验证函数中的 el 变量将是正在验证的输入/字段的 DOM 元素。 required 变量将告诉您该字段是否被标记为必需（布尔值）。 parent 变量将设置为字段的“父级”。我说“父”是因为虽然label 标签在技术上是input 元素的父标签，但abide 足够聪明地意识到标签是该字段的元素结构的一部分并跳过它到li 元素.

从那里，您需要一种方法来识别共同的父母。因此，我将checkbox-group 类添加到我决定将组中所有复选框设为“父级”的任何元素中。这不是 Foundation 或 Abide “魔术”类，而是我自己创建的用于验证功能的东西。

从那里，您可以轻松地跟踪验证函数的几行以查看工作流程：找到组容器对象，解析容器的 data-abide-validator-limits 属性的限制，计算容器中检查输入的数量，检查如果检查的数字在限制之间，则显示/隐藏错误消息并返回 true/false，以便 abide 知道该字段是否有效。

如果您愿意自己检查一下，我有 a working Fiddle of it ;) 希望这对您有所帮助，并祝您在玩 Foundation 时好运！

【讨论】：