我正在尝试让基金会的 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 添加到外部资源时,数据无效会如您所料地附加。