simple_form Bootstrap錯誤驗證

Question

在Rails教程第7章清單20中， https： //www.railstutorial.org/book/sign_up#sec-signup_error_messages M. Hartl使用了一個類

field_with_errors {
  @extend .has-error;
  .form-control {
    color: $state-danger-text;
  }

用引導程序設置突出顯示輸入錯誤的樣式。 他在這里使用form_for助手。 我正在嘗試使用simple_form做同樣的事情，但是它不起作用。 有人知道如何解決嗎？ 出現錯誤時，我想突出顯示我的simple_form輸入字段。 請注意，即時通訊使用f.input_filed

 <div class="input-group sign_up">
     <span class="input-group-addon"><i class="fa fa-asterisk fa-2x"></i></span>
     <%= f.input_field :password_confirmation, label: false, placeholder: "Confirm password", class: "form-control input-lg" %>   
    </div>

   <div class="input-group">
    <span class="input-group-addon"><i class="fa fa-envelope fa-2x"></i></span>
    <%= f.input_field :email, label: false, placeholder: "Email", class: "form-control input-lg" %>   
   </div>
    <div class="form-group margin-btn_top">
   <%=f.button :submit, 'Create my account', class:  "btn btn-block btn-primary btn-lg", id: "btn-signup" %>
   </div>
<% end %>

Answer 1

1. 首先看到CSS代碼中的錯誤

   \n     field_with_errors {\n       @extend .has-error;\n       .form-control {\n         顏色：$ state-danger-text;\n       }\n

至

.field_with_errors {
  @extend .has-error;
  .form-control {
    color: $state-danger-text;
  }

2. 另外，要顯示錯誤塊，您可以執行如下所示的操作

    <% if @YOUR_VARIABLE.errors.any? %> <div id="error_explanation"> <div class="alert alert-danger"> The form contains <%= pluralize(@YOUR_VARIABLE.errors.count,"error")%>. </div> <ul> <% @YOUR_VARIABLE.errors.full_messages.each do |msg| %> <li><%= msg %></li> <% end %> </ul> </div> <% end %> 

UPDATE

With （ 對於使用f.text_field創建的字段，不使用field_with_errors包裝css div，但適用於f.input ）

如果要將類傳遞給SimpleForm的輸入，則應使用

= f.input :name, :input_html => { :class => 'input-text' }