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

Question

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

让我们考虑一组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>

在这一点上，我只是尝试计数选中的输入。但似乎我甚至不能触发验证器…如果我能弄清楚如何触发它，我想我可以设法编码我的验证东西。

事实上，我没有找到很多自定义验证器的例子，官方文档也没有给我太多帮助。

Answer 1

你的HTML标记不是真的"正确"。您应该将data-abide-validator属性附加到输入，而不是父div。此外，您需要一些更好的标记，以便遵守默认的错误显示可以工作(并且更好地使用foundation的网格系统来布局它)。我想让你去看看Zurb网站上的遵守验证页面，看看一些表单标记的例子。

我已经冒昧地重组了你的标记，使之更像一个基础布局:

<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类添加到我决定使组中所有复选框的"父"元素的任何元素中。这不是Foundation或Abide的"魔法"类，而是我自己创建的用于验证函数的类。

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

我有一个工作的小提琴，如果你愿意看看自己;)希望这对你来说是有用的，我祝你好运，玩得很好，这是基础!