默認顯示zurb基礎錯誤消息？

Question

我在rails 4應用程序中使用foundation.abide.js，基本代碼設置如下。無論我嘗試什麼或者我的谷歌我似乎無法確定爲什麼默認窗體總是顯示紅色的錯誤消息。關於我失蹤的任何想法？

<div class="row"> 
    <div class="large-12 columns"> 
    <h2>Abide</h2> 
    <h4 class="subheader">Abide is an HTML5 form validation library that supports the native API by using patterns and required attributes.</h4> 

    <form class="custom" data-abide> 
     <fieldset> 
     <legend>Fieldset</legend> 

     <div class="row"> 
      <div class="large-12 columns"> 
      <label for="password">Password <small>required</small></label> 
      <input type="password" id="password" placeholder="LittleW0men." name="password" required> 
      <small class="error" data-error-message>Passwords must be at least 8 characters with 1 capital letter, 1 number, and one special character.</small> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="large-12 columns"> 
      <label for="phone">Phone</label> 
      <input type="tel" id="phone" placeholder="1 234-567-8910"> 
      <small class="error" data-error-message>Please enter a properly formatted telephone number.</small> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="large-4 columns"> 
      <label for="email">Email</label> 
      <input type="email" id="email" placeholder="foundation@zurb.com"> 
      <small class="error">Valid email required.</small> 
      </div> 
      <div class="large-4 columns"> 
      <label for="url">URL <small>required</small></label> 
      <input type="url" id="url" placeholder="http://zurb.com" required> 
      <small class="error" data-error-message>Valid URL required.</small> 
      </div> 
      <div class="large-4 columns"> 
      <div class="row collapse"> 
       <label for="customDropdown1">Hardest to find in grocery <small>required</small></label> 
       <select id="customDropdown1" class="medium" required> 
       <option value="">Select grocery item</option> 
       <option value="first">Green Chilies</option> 
       <option value="second">Raisins</option> 
       <option value="third">Panko bread crumbs</option> 
       <option value="fourth">Assistance</option> 
       </select> 
       <small class="error" data-error-message>Broke.</small> 
      </div> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="large-12 columns"> 
      <hr> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="large-6 columns"> 
      <label for="radio1"><input name="radio1" type="radio" id="radio1" required><span class="custom radio"></span> Radio Button 1</label> 
      <label for="radio1"><input name="radio1" type="radio" id="radio1" required><span class="custom radio"></span> Radio Button 2</label> 
      <label for="radio1"><input name="radio1" type="radio" id="radio1" required><span class="custom radio"></span> Radio Button 3</label> 
      </div> 
      <div class="large-6 columns"> 
      <label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;" required><span class="custom checkbox"></span> Label for Checkbox</label> 
      <label for="checkbox2"><input type="checkbox" id="checkbox2" CHECKED style="display: none;" required><span class="custom checkbox checked"></span> Label for Checkbox</label> 
      <label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3" style="display: none;" required><span class="custom checkbox checked"></span> Label for Checkbox</label> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="large-12 columns"> 
      <hr> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="large-12 columns"> 
      <label for="remarks">Closing Remarks</label> 
      <textarea id="remarks" name="remarks" placeholder="Leave your remarks here."></textarea> 
      </div> 
     </div> 

     <div class="row"> 
      <div class="large-12 columns"> 
      <button type="submit" class="medium button green">Submit</button> 
      </div> 
     </div> 

     </fieldset> 
    </form> 

    </div> 
</div> 

Answer 1

這是很難只用HTML片段，以發現問題（這看起來不錯，所以這個問題必須在其他地方）。

你有沒有確保：

• 您包括了所有從zurb基礎架構的CSS並沒有意外覆蓋一些CSS屬性（與DIV檢查的「錯誤」類確實檢查默認是隱藏的）
• 確保你沒有正試圖發送一個JS代碼片段/驗證在網頁加載時

形式如果您想更詳細的分析，地方發佈整個事情讓我們可以看到完整的集合（HTML + CSS + JS）