CODEWITHSUNDEEP
javascripthtmlvalidationzurb-foundationzurb-foundation-5
josef.van.niekerk
josef.van.niekerk

Reputation: 12121

Zurb Foundation - Abide validation won't trigger

I'm trying to get Foundation's Abide validation working with a simple static form, but I'm not getting any errors or response from it. I'm expecting to see data-invalid attributes added to the invalid input elements, but they remain unchanged.

I've included Modernizr, jQuery and as far as I can see from the Zurb docs, all the dependencies that Abide requires. I don't care about CSS right now, just want to be able to have Abide validate the form.

Most of the following code has been taken from the Zurb Foundation docs:

<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>

Can anyone see what's wrong with the above? All the .js files are loading, no 404 errors in Chrome console.

Upvotes: 2

Views: 2665

Answers (2)

Kiang
Kiang

Reputation: 31

It seems that this piece of CSS is required:

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

Foundation 5 seems to read its global namespace from the font-family property of meta.foundation-data-attribute-namespace (that's kinda weird).

Upvotes: 1

dave
dave

Reputation: 2298

Foundation.css is required. When I forked your fiddle and simply added foundation.css to external resources, data-invalid appends as you'd expect.

Upvotes: 0

Related Questions