2

我试图让 Foundation 的 Abide 验证使用简单的静态表单,但我没有收到任何错误或响应。我希望看到无效输入元素中添加了数据无效属性,但它们保持不变。

我已经包含了 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 错误。

4

2 回答 2

1

似乎需要这段CSS:

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

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

于 2016-03-18T04:57:52.097 回答
0

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

于 2015-05-15T23:46:17.077 回答