Zurb 基金会 - 遵守验证不会触发答案

【问题标题】：Zurb Foundation - Abide validation won't triggerZurb 基金会 - 遵守验证不会触发
【发布时间】：2015-06-23 02:00:24
【问题描述】：

我正在尝试让 Foundation 的 Abide 验证使用简单的静态表单，但我没有收到任何错误或响应。我希望看到 data-invalid 属性添加到无效的输入元素，但它们保持不变。

我已经包含了 Modernizr、jQuery 以及从 Zurb 文档中可以看到的所有 Abide 所需的依赖项。我现在不关心 CSS，只想让 Abide 验证表单。

以下大部分代码取自 Zurb Foundation 文档：

<html>
<head>
    <title>Abide test...</title>
    <script src="js/modernizr.js"></script>
</head>
<body>
<form data-abide id="contact">
    <div class="name-field">
        <label>Your name
            <small>required</small>
            <input type="text" required>
        </label>
        <small class="error">Name is required and must be a string.</small>
    </div>
    <div class="email-field">
        <label>Email
            <small>required</small>
            <input type="email" required>
        </label>
        <small class="error">An email address is required.</small>
    </div>
    <button type="submit">Submit</button>
</form>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fastclick.js"></script>
<script type="text/javascript" src="js/foundation.js"></script>
<script type="text/javascript" src="js/foundation.abide.js"></script>
<script>
    $(document).foundation();
</script>
</body>
</html>

谁能看出上面有什么问题？所有 .js 文件正在加载，Chrome 控制台中没有 404 错误。

【问题讨论】：

我注意到 Abide 甚至没有像在 Foundation Abide 文档页面示例中那样添加 novalidate="novalidate"。 foundation.zurb.com/docs/components/abide.html
即使是其他人的这个 jsfiddle 示例：jsfiddle.net/R9T7y 似乎也不起作用。
我已经在jsfiddle.net/josefvanniekerk/rz0nh725/1 创建了自己的小提琴，但仍然没有验证，我想我已经按照 Zurb 的文档阅读了这本书......

标签： javascript html validation zurb-foundation zurb-foundation-5

【解决方案1】：

看来这一段CSS是必须的：

meta.foundation-data-attribute-namespace {
    font-family: false;
}

Foundation 5 似乎从 meta.foundation-data-attribute-namespace 的 font-family 属性中读取了它的全局命名空间（这有点奇怪）。

【讨论】：

【解决方案2】：

Foundation.css 是必需的。当我分叉你的小提琴并简单地将foundation.css 添加到外部资源时，data-invalid 会按照你的预期追加。

【讨论】：

查看foundation.abide.js，我不知道为什么它会打破它，但它确实如此。当我有时间时，我将不得不测试其他 JS 函数，看看它们是否也坏了；也许需要为此创建一个问题。我什至没想到会发生这种情况，只是想我会像往常一样设置它。很奇怪的要求。