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



我正在尝试让基金会的 Abide 验证使用一个简单的静态表单,但我没有得到任何错误或响应。我希望看到将数据无效属性添加到无效的输入元素中,但它们保持不变。

我已经包含了Modernizr,jQuery,据我从Zurb文档中看到的,Abbe需要的所有依赖项。我现在不关心CSS,只是希望能够让Abend验证表单。

以下大部分代码取自 Zurb 基金会文档:

<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错误。

似乎需要这部分 CSS:

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

Foundation 5 似乎从 meta.foundation-data-attribute-namespace 的字体系列属性读取其全局命名空间(这有点奇怪)。

Foundation.css 是必需的。当我分叉您的小提琴并简单地将 foundation.css 添加到外部资源时,数据无效会如您所料地附加。

最新更新