通过CSS将ValidationSummary与一个框包围在一起

默认情况下，Html.ValidationSummary（）生成如下HTML：

There were some errors... 
 
First Name too long
 
Invalid Email Address
  

我想选择整个validation摘要并通过CSS在它周围添加一个边界框，所以我要添加一个这样的CSS类：

 .validation-summary-errors{ background-color:#D9FFB2; border: 1px solid #5CBA30; color:#000000; margin-top:15px; margin-bottom:15px; } 

现在的问题是，这会在validation摘要消息和每条错误消息周围绘制单独的框。 当然不是我的想法。

我可以像这样在摘要周围添加一个div，但是如果没有validation错误，这将导致一个空的红色框，所以这不是这样的：

我可以想到几种方法来解决这个问题：

• 使用服务器端标记有条件地添加边界div
• 通过jQuery添加一个边界div
• 编写我自己的HtmlHelper包装器，打印一个CSS友好的ValidationSummary

但是，所有这些对于解决这样一个简单的任务来说都很尴尬。 必须有更好的方法来做到这一点。 也许还有其他一些编写CSS类的方法，所以当没有validation摘要时我没有得到一个空盒子？

编辑：只是为了澄清，我正在调用这样的html帮助：

编辑2：这个问题的范围是看我是否忽略了一些容易且显而易见的事情。 好像我没有，所以我只需添加我自己的HtmlHelperfunction，以满足我的需求。 我投票支持我自己的问题。

Answer 1

这是一些可行的CSS：

 .validation-summary-errors { background-color: #D9FFB2; border:1px solid #5CBA30; width: 400px; } span.validation-summary-errors { border-bottom-color: #D9FFB2; display:block; } ul.validation-summary-errors { margin:0; padding:0; border-top:none; } 

您可能需要根据您的其他css来调整宽度。

评论后编辑

我更改了ul.validation-summary-errors以使边距和填充为零，并删除了宽度。 它应该现在可以跨浏览器工作。

Answer 2

如果你有一个包装div，就像你提供的第二个代码示例。 然后很容易使用jQuery将错误类从span＆ul“移动”到外部div。

        
 
My Modal Message
 There were some errors... 
 
First Name too long
 
Invalid Email Address
 
 
   

此代码将操纵HTML看起来像这样……

  
 
My Modal Message
 There were some errors... 
 
First Name too long
 
Invalid Email Address
 
  

Answer 3

如果我正在读这个并且您只想在span.validation-summary-errors （而不是内部内容）上使用边框，那么：

 .validation-summary-errors {border: 0 none transparent; /* set defaults for inner */ } span.validation-summary-errors {background-color:#D9FFB2; /* sets the span */ border: 1px solid #5CBA30; color:#000000; margin-top:15px; margin-bottom:15px; } 

应该这样做。

或者，可靠性稍差：

 .validation-summary-errors {background-color:#D9FFB2; border: 1px solid #5CBA30; color:#000000; margin-top:15px; margin-bottom:15px; } .validation-summary-errors > .validation-summary-errors, .validation-summary-errors .validation-summary-errors {border: 0 none transparent; /* should apply styles to */ } /* the children/descendants */ /* with the same name - untested though... */ 

Answer 4

另一个需要的解决方案

 @Html.ValidationSummary(false, "", new { @class = "***YOUR CSS CLASS***" })