javascript - Zurb Foundation - 遵守验证不会触发

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

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

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

以下大部分代码取自 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 的 font-family 属性中读取其全局命名空间(这有点奇怪)。

关于javascript - Zurb Foundation - 遵守验证不会触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29678513/

相关文章:

forms - 如何有条件地要求 Angular 4 中的表单输入?

asp.net - 使用客户端代码设置并显示自定义验证的错误

javascript - Angular react 形式 : Producing an array of checkbox values?

javascript - 悬停时更改 Div 标签属性

javascript - 创建一个下拉搜索表单

css - 使用 Bootstrap 导航不适用于移动设备

html - 将分页(NEXT/LAST 等)链接放在统计表元素的 <tfoot> 中是否符合语义/可接受?

java - 通过程序动态启用或禁用特定 EditText View 的验证

javascript - Div 下拉菜单覆盖其他内容

javascript - 在javascript中四舍五入到小数点后两位,例如在js中以数学方式将4.9995舍入到4.99