This is the form for my mail(). If a field is left blank or the e-mail is not valid, the patterns take effect and prevent form submission but the errors themselves do not show. I basically lifted the code from a newsletter sign-up form on another page where-in the errors do show up. If anyone is familiar enough with Foundation or see any problem that my biased eyes cannot, I would appreciate it greatly :)
<form class="contact" action="booking.php" method="POST" data-abide>
<ul class="no-bullets">
<div class="input-wrapper">
<li><input type="text" name="fullname" placeholder="Full Name" required /></li>
<small class="error">Please provide your full name</small>
</div>
<div class="input-wrapper">
<li><input type="text" name="from" placeholder="E-mail" required pattern="email" /></li>
<small class="error">Please provide a valid email address</small>
</div>
<div class="input-wrapper">
<li><textarea name="message" placeholder="Message" required></textarea></li>
<small class="error">Please enter a message</small>
</div>
<li><input type="submit" class="button right" value="SEND" /></li>
</ul>
</form>
The errors aren't showing up due to the fact the input tags are wrapped within list item tags.
To ensure the error messages show they must be the next element in the DOM after the input field. Like this:
<form class="contact" action="booking.php" method="POST" data-abide>
<div class="input-wrapper">
<input type="text" name="fullname" placeholder="Full Name" required />
<small class="error">Please provide your full name</small>
</div>
<div class="input-wrapper">
<input type="text" name="from" placeholder="E-mail" required pattern="email" />
<small class="error">Please provide a valid email address</small>
</div>
<div class="input-wrapper">
<textarea name="message" placeholder="Message" required></textarea>
<small class="error">Please enter a message</small>
</div>
<input type="submit" class="button right" value="SEND" />
</form>
Hope this helps.