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

Question

我想创建一个验证器来遵守一组复选框.

我们考虑一组5个复选框.要求用户检查3 max,并且至少检查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>

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

事实上,我没有找到很多自定义验证器的例子,官方文档对我没什么帮助.

Answer 1

您的HTML标记对于遵守并不是真正的"正确".您应该将data-abide-validator属性附加到输入,而不是父div.此外,您需要一些更好的标记,以便abide的默认错误显示可以工作(并且更好地使用基础的网格系统来进行布局).我会指向Zurb网站上的Abide Validation页面,了解表格标记的一些例子.

我冒昧地重组你的标记,成为更多的基础布局:

<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元素的父级,但是足够聪明才能意识到标签是字段元素结构的一部分,li而是跳过它到元素.

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

从那里,您可以轻松跟踪验证功能的几行以查看工作流程:查找组容器对象,解析容器data-abide-validator-limits属性的限制,计算容器中已检查输入的数量,检查检查的数字是否介于两者之间限制,显示/隐藏错误消息并返回true/false,以便知道该字段是否已验证.

如果你想自己检查一下,我有一个工作的小提琴 ;)希望这对你来说很有用,我希望你能用最棒的基础玩好运!