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

首先看到css代码中的错误

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

到

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

此外，要显示错误块，您可以执行以下所示的操作

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

<强>更新

用的（Not wrapping css div with field_with_errors for fields created with f.text_field but works for f.input）

如果要将类传递给SimpleForm的输入，则应使用

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

simple_form引导程序错误验证

1 个答案: