html - Rails 错误消息破坏注册表单

Question

我正在学习本教程:http://ruby.railstutorial.org/chapters/sign-up#top我对来自 rails 的错误消息的样式有疑问。

我想完成这个:

但相反，我的表格被打破了，我得到了这个丑陋的表格:

我检查了一个源代码，插入了 nov div 标签，而不是标签和输入:

如何覆盖该行为并完成该表单，如教程中那样仅突出显示？

谢谢。

编辑 1:

我发现问题出在哪里了。我正在使用 Bootstrap 3.1.0 并且扩展在那里不起作用。所以，这是行不通的:

#error_explanation {
  color: #f00;
  ul {
    list-style: none;
    margin: 0 0 18px 0;
  }
}

.field_with_errors {
  @extend .control-group;
  @extend .error;
}

因此，这段代码无法正常工作:

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

我找不到使该扩展工作的方法。就像控制组不存在一样......

编辑 2:

好的，当我将此代码添加到 config/environment.rb 时，表单不会中断，但无法完成输入错误的表单周围的红线:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
  html_tag.html_safe

Answer 1

您为什么使用 Bootstrap 3？教程告诉你使用

gem 'bootstrap-sass', '2.3.2.0'

在你的 gemfile 中。你真的应该这样做，因为本教程为你提供了大量旨在与 Bootstrap 2 一起使用的代码。当然，它与 Bootstrap 3 不兼容。如果你真的想使用 B3，你将不得不改变很多你的观点中很少有类名。在其他更改中执行此操作:

• 将 div class="alert alert-error" 更改为 div class="alert alert-danger"
• 将 form-group 和 form-control 类应用于您的表单字段(参见示例 here)。

• 在您的 CSS 中:

  .field_with_errors {
    @extend .has-error;
  }
  

• 然后做提到的所有其他更改here .