CSS を使用して Validationsummary をボックスで囲む

StackOverflow https://stackoverflow.com/questions/940335

質問

デフォルトでは、 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>

これを解決するにはいくつかの方法が考えられます。

  • サーバーサイドタグを使用して条件付きで境界 div を追加します
  • jQuery経由で境界divを追加する
  • CSS フレンドリーな Validationsummary を出力する独自の HtmlHelper ラッパーを作成する

ただし、このような単純なタスクを解決するには、これらすべてが非常に厄介に見えます。もっと良い方法があるはずです。おそらく、検証の概要がない場合に空のボックスを取得しないように CSS クラスを記述する別の方法があるでしょうか?

編集： 明確にするために、私は次のように HTML ヘルパーを呼び出しています。 

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

編集2: この質問の範囲は、私が何か非常に明白なことを見落としていないかどうかを確認することでした。まだないようなので、ニーズに合った独自の HtmlHelper 関数を追加するだけです。私は自分の質問を閉じることに投票します。

役に立ちましたか？

解決

ここで動作するいくつかの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サマリー・エラーを変更し、幅を削除しました。今ではクロスブラウザを動作するはずです。

他のヒント

あなたが設けられた第二のコード例のようなラッピングdiv要素を持っていた場合。そして、その外側のdivにスパン＆ULからのエラークラスを「移動」するためにはjQueryを使用して簡単になります。

<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>
その後、（内側の内容ではなく）

私はこの権利を読んでいる場合は、あなたが唯一の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... */

もう一つ、必要な解決策ます。

@Html.ValidationSummary(false, "", new { @class = "***YOUR CSS CLASS***" })
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top