Foundation 5/Abide.js問題（錯誤未顯示）

Question

這是我的郵件（）的表單。如果一個字段留空或電子郵件無效，模式將生效並阻止表單提交，但錯誤本身不會顯示。我基本上從另一個頁面上的電子報註冊表單中提取代碼，在這個錯誤顯示出來。如果有人熟悉足以與基金會或看到我的偏見的眼睛不能，我將不勝感激大大:)

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

Answer 1

的錯誤是沒有顯示由於輸入標籤包裝列表項目中的任何問題標籤。

要確保錯誤消息顯示它們必須是輸入字段後DOM中的下一個元素。像這樣：

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

希望這會有所幫助。