simple_form Bootstrap错误验证

Question

In the rails tutorial chap 7, Listing 20, https://www.railstutorial.org/book/sign_up#sec-signup_error_messages M. Hartl used a class

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

to style input errors highlighting with bootstrap. Here he is using form_for helper. I am trying to do the same thing with simple_form but it is not working. Anyone knows how to solve this? I want to highlight my simple_form input field when there is an error. Please note that im using 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. First see a mistake in css code

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

to

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

2. Also, to display the block of errors you can do something like shown below

    <% 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 ( Not wrapping css div with field_with_errors for fields created with f.text_field but works for f.input )

If you want to pass class to SimpleForm's input you should use

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