Why doesn't abide show the error message for the email input?

I built a simple contact form using foundation and its abide plugin. It's basically working, except one thing: The validation for the email input field.

If I submit the form without entering any data, abide shows both validation error messages correctly.
If I enter just input into the message textarea and leave the email input blank, then abide prevents submitting the form, but it doesn't show the error message. It just marks the email input as invalid.
If I enter a valid email address and leave the message textarea blank, then abide shows both validation error messages although the email address is correct.

You can check it on jsbin: https://output.jsbin.com/cacucunama

Minimal running example (same as jsbin):

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>ZURB Foundation Abide form validation error</title>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation.min.css">
    <script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/js/foundation.min.js"></script>
</head>

<body>
    <form action="#" method="get" enctype="multipart/form-data" data-abide novalidate id="footer-contact-form">
        <div class="input-group">
            <span class="input-group-label">N</span>
            <input name="user[name]" value="" type="text" id="footer-contact-form--name" class="input-group-field"
                placeholder="Name">
        </div>
        <div class="input-group">
            <span class="input-group-label">@</span>
            <input name="user[email]" value="" type="email" id="footer-contact-form--email" class="input-group-field"
                placeholder="Email address*" required pattern="email">
        </div>
        <label class="form-error" data-form-error-for="footer-contact-form--email">Valid email required.</label>
        <textarea name="user[message]" id="footer-contact-form--message" placeholder="Message*" rows="3"
            required=""></textarea>
        <label class="form-error" data-form-error-for="footer-contact-form--message">A message is required.</label>
        <button value="" type="submit" class="button expanded">Send</button>
    </form>
</body>

</html>

Solution

As already answered at https://foundation.discourse.group/t/abide-doesnt-show-the-correct-validation-error-message/2276/10 you forgot to wrap the label + input pars in the part with the email input and message textarea.

https://codepen.io/DanielRuf/pen/dyYpjYZ

It works with the following code:

<form action="#" method="get" enctype="multipart/form-data" data-abide novalidate id="footer-contact-form">
        <div class="input-group">
            <span class="input-group-label">N</span>
            <input name="user[name]" value="" type="text" id="footer-contact-form--name" class="input-group-field"
                placeholder="Name">
        </div>
        <div>
              <div class="input-group">
                  <span class="input-group-label">@</span>
                  <input name="user[email]" value="" type="email" id="footer-contact-form--email" class="input-group-field"
                      placeholder="Email address*" required pattern="email">
              </div>
              <label class="form-error" data-form-error-for="footer-contact-form--email">Valid email required.</label>
        </div>
        <div>
              <textarea name="user[message]" id="footer-contact-form--message" placeholder="Message*" rows="3"
                  required=""></textarea>
              <label class="form-error" data-form-error-for="footer-contact-form--message">A message is required.</label>
        </div>
        <button value="" type="submit" class="button expanded">Send</button>
    </form>