css - 如何在一种形式上正确显示客户端错误和服务器端错误？

Question

我正在使用 RubyOnRails 和 jQuery 验证插件。我想让所有错误看起来都一样。

这是我的错误代码:

 <% if @website.errors.any? %>//for server errors
  <div class="error_explanation">
  <ul>
    <% @website.errors.full_messages.each do |msg| %>
      <li><%= msg %></li>
    <% end %>
  </ul>  
 </div>
<% end %>
 <div id="messageBox1"> //for client side errors
  <ul></ul> 
</div>

我试图将所有内容包装成一种形式，但如果这样做:

    <div class="error_background">
      if ...server side ...
      end
     ... client site ...
    </div>

CSS:

.error_background{
padding: 20px 0 20px 20px;
width: 285px;
background: rgb(252, 248, 227) ;
border-radius: 5px;
 }

但它在没有服务器端错误时显示背景。

我怎样才能正确地做到这一点？

Answer 1

如果你想让它们看起来一样，那么你所要做的就是在你的 css 中使用逗号为它们制作一个阶梯，如下所示:

.error_explanation, #messageBox1 {}

只有当你有错误时，你才应该将它们插入到dom中，或者将你的背景放在它们里面

.error_explanation, #messageBox1 ul {
    padding: 20px 0 20px 20px;
    width: 285px;
    background: rgb(252, 248, 227) ;
    border-radius: 5px;
}