Question

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

<span class="validation-summary-errors">There were some errors...</span>
<ul class="validation-summary-errors">
   <li>First Name too long</li>
   <li>Invalid Email Address</li>
</ul>

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

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

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

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

  <div class="my-validation-summary">
        <h2>
            <%=Model.Message%>
        </h2>
        <%= Html.ValidationSummary("There were some errors...")%>
    </div>

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

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

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

修改：为了澄清，我正在调用这样的html帮助器：

<%=Html.ValidationSummary("There were some errors...") %>

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

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＆amp;中“移动”错误类是很容易的。 ul到那个外部的div。

<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      var className = "validation-summary-errors";
      $("." + className).removeClass(className).closest("div").addClass(className);
    });
  </script>
  <style type="text/css">
    .validation-summary-errors { border: solid 1px red; },
  </style>
</head>

<body>
  <div>
    <h2>My Modal Message</h2>
    <span class="validation-summary-errors">There were some errors...</span>
    <ul class="validation-summary-errors">
      <li>First Name too long</li>
      <li>Invalid Email Address</li>
    </ul>
  </div>
</body>
</html>

此代码将操作HTML看起来像这样......

  <div class="validation-summary-errors">
    <h2>My Modal Message</h2>
    <span class="">There were some errors...</span>
    <ul class="">
      <li>First Name too long</li>
      <li>Invalid Email Address</li>
    </ul>
  </div>

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***" })

通过CSS在ValidationSummary周围加一个框

4 个答案: