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;
}