Ruby China

新手问题 注册页的 errors.full_messages 错误提示样式如何修改

tailang · July 13, 2013 · Last by tailang replied at July 16, 2013 · 3773 hits

我用了 devise，bootstrap-sass 这两个 gem
app/views/devise/registrations/new.html.erb

<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => {:class => "form-horizontal"}) do |f| %>
     <h2>注册新用户</h2>
  <%= render 'shared/error_messages', object: f.object %>
......

app/views/shares/_error_messages.html.erb

<% if object.errors.any? %>
    <div id="error_explanation"> 
      <div class="alert alert-error">
      <button type="button" class="close" data-dismiss="alert">&times;</button>
      <p><strong>有<%= object.errors.count%>个错误导致操作失败:</strong> </p>
      <ul>
      <% object.errors.full_messages.each do |msg| %>
      <li> <%= t(msg) %>

      </li>
      <% end %>
    </ul>
 </div> 
    </div>
<% end %>

然后我在自己的 css 中添加了如下： 

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

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

但提示的样式如下，仍有红块

而不是如下面的样式

以前没用 devise，自己写注册表单是没有红块

luikore #1 July 16, 2013

css 的问题。应该和 full_messages 无关...

在 chrome 里 inspect 一下就知道样式问题在哪了

libuchao #2 July 16, 2013

我的方法是在config/application.rb中加上：

config.action_view.field_error_proc = Proc.new {
  |html_tag, instance| "#{html_tag}".html_safe
}
tailang #3 July 16, 2013

@luikore @libuchao 我的方法也是在 config/application.rb 中添加了

config.action_view.field_error_proc = Proc.new {
  |html_tag, instance| "#{html_tag}".html_safe
}

但是这样也有一个问题，红块可以去掉，但是出现错误是对应的边框不会高亮显示（如上图的下面那个图）。在《ruby on rails tutorial》这本书中就是用我帖子里的方法实现上图的下面那个图的样式的，但是当我准备自己写个小项目练习一下时，就出现了上图中上面那个图的样式，具体原因还没找到，下次准备用 simple_form+bootstrap 试试。 谢谢

libuchao #4 July 16, 2013

#3 楼 @tailang 那你可以不按我这个方法。

如果你分析一下它生成的 HTML 可以看到有一个 div.field_with_errors，你可能要改一下 scaffolds.css

tailang #5 July 16, 2013

@libuchao 非常感谢提醒 前几天我在设置全局的 a 标签 也一直失败 原来我用了 scaffold 生成 post 然后生成 scaffolds.css 这个文件的原因，一直没留意到。thanks

You need to Sign in before reply, if you don't have an account, please Sign up first.