Question

我正在关注本教程：http://ruby.railstutorial.org/chapters/sign-up#top我遇到来自rails的错误消息样式的问题。

我想完成这个：

但不是那样，我的表格破了，我得到了这种丑陋的形式：

enter image description here

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

enter image description here

如何覆盖该行为并完成该表单只会像在教程中一样突出显示？

谢谢。

编辑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）。

：

.field_with_errors {
  @extend .has-error;
}

然后执行提及的所有其他更改here。

Answer 2

这似乎是一个很常见的错误 - 你有没有试过其中任何一个：

@extend documentation

预编译

如果失败，您可能希望尝试资产预编译：

#config/environments/production.rb
config.serve_static_assets = true
config.assets.compile = false

$ rake assets:precompile RAILS_ENV=production

<强>混入

这不会直接修复它，但你可以为样式创建一个mixin，并包含如下：

@mixin error {
    display: block;
    etc
}

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

Rails错误消息打破注册表单

2 个答案: