2

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 エラーは表示されません。

4

2 に答える 2

1

次の CSS が必要なようです。

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

Foundation 5 は、そのグローバルな名前空間を font-family プロパティから読み取っているようですmeta.foundation-data-attribute-namespace(これはちょっと奇妙です)。

于 2016-03-18T04:57:52.097 に答える
0

Foundation.css が必要です。あなたのフィドルをフォークして、単にfoundation.cssを外部リソースに追加しただけで、期待どおりに無効なデータが追加されました。

于 2015-05-15T23:46:17.077 に答える