Abide form plugin container surrounding errors doesn't hide

Foundation sites: 6.4.1
I have a container that surrounds the number of specific errors. How come the data-abide-error container doesn’t hide when the form is valid? It only seems to hide itself on submit once it appears with the errors.

What ends up happening is that all the error message disappear once the user corrects the input fields. The user is left with a callout box with the “Whoops!” heading being by itself because all the fields now have values. This doesn’t disappear until you actually submit the form. I want the outer container element to hide once all fields are correct. This doesn’t happen and it continually displays until submit.

<form action="/somwhere" id="email-form" class="contact-us-form" method="post" data-abide novalidate>
	<div data-abide-error class="alert callout" style="display: none;">
		<h5>Whoops!</h5>
		<div data-form-error-for="contact-full-name">Full name is required</div>
		<div data-form-error-for="contact-email">Email is required and must be valid</div>
		<div data-form-error-for="contact-message">Message is required</div></p>
	</div>

	<input type="text" name="name" id="contact-full-name" placeholder="Full name" required pattern="[a-zA-Z0-9/.& -]+">
	<input type="email" name="email" id="contact-email" placeholder="Email" required pattern="[^@\s]+@[^@\s]+\.[^@\s]+">
	<textarea name="comments" id="contact-message" rows="7" placeholder="Message" required></textarea>
	<input type="submit" class="button large" value="Send it">
</form>